A UI component library from Xandr.
npm install lucid-uiA UI component library from Xandr.
Lucid can be installed with npm
``sh`
npm install --save lucid-ui
`js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'lucid-ui';
ReactDOM.render(, 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 filenode_modules/lucid-ui/dist/lucid.css.
There are some _very rare_ situations where you might need to customize the
prefix for all the css class names emitted by the library and less. If you
find yourself in that unenviable position, you can do the following:
In your webpack config use the [DefinePlugin][dp] to specifyLUCID_CSS_NAMESPACE like so:
new webpack.DefinePlugin({
LUCID_CSS_NAMESPACE: "'something-custom'",
});
When you render the less, make sure to [set the prefix variable][lmv] 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'
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:
`json`
{
"dependencies": {
"lucid-ui": "^5.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
}
To contribute to lucid, please see CONTRIBUTING.md`.
- [BrowserStack] for providing cross-browser testing infrastructure.
- [Travis CI] for providing continuous integration infrastructure.
- [CodeCov] for providing code coverage analysis infrastructure.
[browserstack]: https://www.browserstack.com/
[travis ci]: https://travis-ci.org/
[codecov]: https://codecov.io
[bpi]: https://github.com/ant-design/babel-plugin-import
[dp]: https://webpack.js.org/plugins/define-plugin/
[lmv]: http://lesscss.org/usage/