React-props-classnames NPM

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.