classed
v0.4.1
Published
Create reusable className wrappers for DOM elements in React
Downloads
26
Readme
classed
Create reusable className wrappers for DOM elements in React
npm install --save classed
Usage
import classed from 'classed';
const MyComponent = classed.h1('my-css-class');
// This:
<MyComponent>Hello World</MyComponent>
// is equivalent to this:
<h1 className="my-css-class">Hello World</h1>
- Props can be passed down as with any other React components.
- Besides
h1
, you can use any of the components available fromReact.DOM
. - Any valid arguments to classnames are valid here.
Why
This extremely simple package was inspired by styled-components, which is a wonderful solution for collocating components with their styles using real CSS. However, not all teams are willing or able to adopt a CSS-in-JS approach in their existing projects. classed
gives teams with large existing CSS code bases an easy way to tidy up the style-specific elements in their React render methods to make their component hierarchies easier to read.