modifiers-composer
v1.1.1
Published
A simple library to add BEM modifiers to your React components
Downloads
5
Maintainers
Readme
#modifiers-composer
An utility function to compose BEM modifiers in React with EmotionSH or styled-components
Install
# With npm
npm i modifiers-composer
# With yarn
yarn add modifiers-composer
Usage
modifiers-composer
import modifiersComposer from 'modifiers-composer'
import styled from 'react-emotion'
const modifiersComposed = modifiersComposer({
uppercase: () => `text-transform: uppercase`,
colorRed: () => `color: red`
})
const Text = styled.div`
${props => modifiersComposed(props)};
`
const Container = () => (
<Text modifiers={['uppercase', 'colorRed']}>
Hello World!
</Text>)
withModifiers
import { withModifiers } from 'modifiers-composer'
import styled from 'react-emotion'
const modifiersConfig = {
uppercase: () => `text-transform: uppercase`,
colorRed: () => `color: red`
}
const Text = styled.div`
${({ modifiers }) => modifiers};
`
const Element = withModifiers(modifiersConfig)(({ modifiers }) => (
<Text modifiers={['uppercase', 'colorRed']}>
Hello World!
</Text>))