Lucid: a React component library from AppNexus

by React

Lucid

Lucid UI is a React component library by AppNexus.

  • Battle-tested in Enterprise Apps
  • Hybrid Component State
  • Child Component Composition
  • Computed Props With reselect
  • Pure SVG Charts Built on D3
  • Human-readable CSS Class Names
View Demo View Github

Install

Lucid can be installed with npm

  npm install --save lucid-ui

or yarn

  yarn add 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 and less. 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 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'

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.