React Props Classnames

Easily transform component's props to classnames

• Good usage with styled-components when you want to control styles by props.
• Transform your boolean and string props to className.
• Customized classNames prefix.

Install

yarn add react-props-classnames

Examples

Usage

import styled from 'styled-components';
import createPropsTransform from 'react-props-classnames';
 
const propsTransform = createPropsTransform({
  prefix: 'my-button',
  props: ['circle', 'size'],
});
 
const Button = styled.button`
  /* ... */
 
  &.my-button-circle {
    /* ... */
  }
 
  &.my-button-size-lg {
    /* ... */
  }
`;
 
export default propsTransform(Button);

<Button circle size="lg" type="button" disalbed>Button</Button>
 
// will trasnform to
 
<button class="{...styled} my-button-circle my-button-size-lg">Button</button>

API

createPropsTransform(options)

options (Object)

Returns

A higher-order component that transform props then pass into your components.

License

MIT © jigsawye