Easily transform component's props to classnames
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmrc
.travis.yml
README.md
package.json
yarn.lock

README.md

React Props Classnames

Travis Codecov npm

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

Edit 5zzjpn94zn

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