https://github.com/artemshitov/propmods
Turn your React props and state into BEM modifiers
https://github.com/artemshitov/propmods
bem bem-modifiers classname component-props css react
Last synced: 5 months ago
JSON representation
Turn your React props and state into BEM modifiers
- Host: GitHub
- URL: https://github.com/artemshitov/propmods
- Owner: artemshitov
- License: mit
- Created: 2016-10-12T18:15:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-21T15:32:07.000Z (about 9 years ago)
- Last Synced: 2025-10-20T21:57:23.709Z (8 months ago)
- Topics: bem, bem-modifiers, classname, component-props, css, react
- Language: TypeScript
- Size: 26.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Propmods
Propmods is a low-boilerplate way to BEM-annotate your React components. Propmods keeps your JSX clean by turning component props and state into BEM modifiers automatically.
```js
import * as React from 'react';
import block from 'propmods';
const b = block('button');
class Button extends React.Component {
render() {
return
{this.props.children}
;
}
}
// This React component:
Push me!
// Turns into this DOM element:
Push me!
```
## Install
Yarn:
```
yarn add propmods
```
NPM:
```
npm install --save propmods
```
## Usage
This documentation assumes that you are using a modern JavaScript bundler like Webpack or Browserify, NPM package manager, and an ES2015 compiler (e.g. Babel).
First, import Propmods and choose a block name:
```js
import block from 'propmods';
const b = block('button');
```
If you use CommonJS modules, you need to require `default` export:
```js
const block = require('propmods').default;
const b = block('button');
```
### Blocks
The intended way to use Propmods is to call function `b` with your component as the argument and to merge results into the rendered component's props:
```js
```
Propmods will take your component's props and state, and will create appropriate classes. It is smart enough not to pick props which are not valid in CSS, so don't worry that a nested object or a page-long text gets into your class name.
You can also pass any other modifiers as arguments, or point directly to props, state or context if you don't wrap components into classes:
```js
const Button = (props) => {
return {props.children};
};
```
You can also mix in arbitrary classnames:
```js
```
### Elements
To create BEM elements, pass the element's name as the first argument:
```js
```
### Customization
#### Q: What if I don't want all props to be used as modifiers?
A: You can pick whatever props and state you like.
```js
import * as _ from 'lodash';
// ...
```
#### Q: JavaScript uses camel case in prop names, and I don't want camel case in my CSS. What do I do?
A: Propmods will apply a case converting function if you supply one when creating your block.
```js
import _ from 'lodash';
const b = block('button', {
transformKeys: _.kebabCase
});
```
#### Q: I don't like your BEM conventions. Can I use my own BEM delimiters?
A: Yes, you can configure Propmods to use any delimiters you prefer. These are the defaults:
```js
const b = block('button', {
elementDelimiter: '__',
modDelimiter: '_',
modValueDelimiter: '_'
});
```
#### Q: I don't want to pass these options each time
A: Create a wrapped function and put it in a separate file in your project. For example:
```js
// lib/bem.js:
import block from 'propmods';
const options = {
// Your options
}
export default function(name) {
return block(name, options);
}
// button.js:
import block from '../lib/bem';
const b = block('button');
```
### Typescript
Propmods is written in Typescript and compiled down to ES5. This package already includes type declarations, so you can use it in your Typescript projects.
## License
MIT.