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