A UI component library from Xandr.
Lucid uses
In your webpack config use the
Example package.json:
To contribute to lucid, please see
Install
Lucid can be installed with npmnpm install --save lucid-ui
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'lucid-ui';
ReactDOM.render(<Button>Hello World</Button>, mountNode);
Lucid uses
less
for its stylesheets. If you use less
, you can include the
styles like so:@import "node_modules/lucid-ui/src/index.less";
If you don't use less
, you can use the precompiled css file
node_modules/lucid-ui/dist/lucid.css
.Custom CSS Scope
There are some very rare situations where you might need to customize the prefix for all the css class names emitted by the library andless
. If you
find yourself in that unenviable position, you can do the following:In your webpack config use the
DefinePlugin
dp to specify
LUCID_CSS_NAMESPACE
like so:new webpack.DefinePlugin({
LUCID_CSS_NAMESPACE: "'something-custom'",
});
When you render the less
, make sure to set the prefix
variablelmv to the
same thing you set in in your webpack config. E.g.lessc node_modules/lucid-ui/src/index.less --modify-var='prefix=something-custom'
Dependencies
lucid-ui
has several React peer dependencies. This means your application
is responsible for declaring dependencies on compatible versions. Currently
we support React 15 and 16.Example package.json:
{
"dependencies": {
"lucid-ui": "^5.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
}
To contribute to lucid, please see
CONTRIBUTING.md
.Credits
- BrowserStack for providing cross-browser testing infrastructure.
- Travis CI for providing continuous integration infrastructure.
- CodeCov for providing code coverage analysis infrastructure.