react-props-classnames

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)

key	Type	Default	Description
prefix	String	'default-prefix'	The prefix of every classNames.
props	Array	[]	The props which will be transformed. If this option is empty, propsTransform will transform any props
bool	Boolean	true	Transform boolean props to classNames or not.
string	Boolean	true	Transform string props to classNames or not.

Returns

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

License

MIT © jigsawye