Easily transform component's props to classnames
Easily transform component's props to classnames
styled-components
when you want to control styles by props.yarn add react-props-classnames
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>
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. |
A higher-order component that transform props then pass into your components.
MIT © jigsawye