I’ve been building with Meteor since the early days of Blaze and it’s been an easy transition to take existing HTML templates and work them with Meteor. However now, with React, React-Router, and NPM imports how is everyone dealing with this?
I’ve been struggling for two hours trying to import http://getuikit.com/ into a sample React based Meteor app and no luck. Anyone have any pointers for importing this? CSS, JS, fonts and all?
What’s everyone using to get up and running quickly?
I haven’t used UIKit, however it looks like it’s just a css library (similar to Bootstrap), where html elements are style with class tags. This may or may not work well with React. You can absolutely use regular css to style components, but keep in mind that React has some idiosyncrasies. For example, instead of class you’ll use className, see DOM Differences.
Aside from that, it appears UIKit is not an NPM package, so to use it you will have to download the .css files and include them in your app using something like React Helmet. I would not actually recommend this method, since there are a lot of libraries which export plain React classes which might require no additional styling, or have a nice syntax for overriding the library’s style with your own. Material-UI is very popular and is quite a bit more in line with current trends.
Does the fact that it’s on npm not make it compatible to import?
https://www.npmjs.com/package/uikit
Sounds like Material-UI will be the most painless to implement. As much as I enjoyed the theme for UIkit.
Not being an npm package would mean there’s no way to import it using the import statement or require('package'). BTW, es6 import statements are just syntactical sugar for require() aka CommonJS modules, which can be demonstrated using babel.
Require/import looks within your node_modules, or more accurately looks for namespaces associated with module.exports. So a UI library which is only CSS would be pretty difficult to use, although with 1.3 we should be able to import css from external libraries. But again, there’s no way to install it via npm. You would have to:
not impossible, but also not something you want to do when you could just use Helmet and use the library in a way the author suggests.
CSS Modules could perhaps help, but you wouldn’t want to require an entire library as a module and then load that whole thing for every component you’re styling. That’s not really the use case for CSS Modules.
I’m not sure where you came under the impression that this isn’t on NPM? I posted an npm link.
That said, I tried react-helmet and it didn’t go so well since it wants to import the libraries I would have to store them in /public and that doesn’t work well with version controlling the npm package…
So, I ended up back with UIKit, and after another 20 minutes I got it working!
Here’s how to import it if anyone else would like to know…
import 'uikit/dist/css/uikit.min.css';
import 'uikit/dist/js/uikit.min.js';
There’s more advanced components in the library and those can be imported with this formatting:
import uikit/dist/css/components/tooltip.min.css;
import uikit/dist/js/components/tooltip.min.js;
Then I’ll just add that to which component file needs this feature.
Sounds like you’re sorted, but if Material-UI is still of interest, I’ve done a port of the Meteor Chef base app to use Material-UI in place of bootstrap, including the elusive signup and login forms.
I need to bump it to the latest releases, but otherwise it should be a good starting point: https://github.com/mbrookes/base/commits/material-ui
Edit: Updated to the current base version and Meteor release.
That does work! Just tried it, i thought it wasn’t published since a cursory look at their documentation didn’t include an installation option via npm. My bad.
