react-suitcss
Build React components that conform to SUIT CSS naming conventions. Express a component's modifiers and states as React props, and react-suitcss will output the proper classes into the DOM.
npm install --save react-suitcss
Usage
Use react-css to create a base component module. Specify which modifiers and states are accepted. For instance, here's how you might create a toolbar component:
var React = ;var SuitCSS = ; var Toolbar = React;
Then you can use your new component like so:
<Toolbar />// <div class="Toolbar" /> <Toolbar />// <div class="Toolbar Toolbar--compact" /> <Toolbar />// <div class="Toolbar is-open" /> <Toolbar />// <div class="Toolbar Toolbar--compact is-open" />
Available props
componentName
- Base class name.modifiers
- Whitelist of accepted modifiers.states
- Whitelist of accepted states. Whitelist values of the formstate
correspond to properties of the formisState
. So if the whitelist containsopen
andthis.props.isOpen
is true, the DOM element gets classis-open
.- element - String of DOM element to use. Defaults to
div
.
License
MIT