search

joernweissenborn / lcars

CSS Framework to style web pages like the fictional computer operating system of a popular sci-fi franchise.
http://joernweissenborn.github.io/lcars/
MIT License
334 stars 80 forks source link

Getting LCARS to work with React #71

Open TyIsI opened 3 years ago

TyIsI commented 3 years ago

Following up on #57:

Just in case anyone else comes across this wondering how to incorporate this into React.

Yes, it is possible. After cleaning up the HTML from the demo page, I've now got it rendering successfully. Haven't gotten lcarsAudio integrated yet, but I'll try that later.

For now, this is how you can get it to work:

npm install -S git+https://github.com/joernweissenborn/lcars#main

or

npx yarn add git+https://github.com/joernweissenborn/lcars#main

Then include the CSS in your "Main.js" or index.js:

import 'LCARS/lcars/css/lcars.devel.css'

I'm hoping to make some components on top of this, so it can be used more easily in React applications.

Also, this is no action needed. Just figured that I'd share this so it's documented for the benefit of others.

jrwarwick commented 3 years ago

@TyIsI Thank you for sharing that guidance. Do you have a copy of your cleaned up version of the demo page somewhere we could look at the source? It might be helpful to summarize the changes you had to make and include in this repository's "official" documentation, or maybe even have a separate bonus template that is "React-ready".

TyIsI commented 3 years ago

@jrwarwick let me see what I can do!

TyIsI commented 3 years ago

I was still working on getting the audio to play nicely in the React model. But this is what I have so far:

EDIT: Deleted my code example. Please see https://gist.github.com/TyIsI/f36063ecd128680c4fe9d46f75573a10 for my implementation.

I also had to extract the inline SVG to its own files and (obviously) I added your LCARS repository as a dependency in package.json.