Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
bem-react-helper
Advanced tools
bem-react-helper - npm Package Compare versions
Comparing version 1.1.2 to 1.2.0
@@ -7,2 +7,6 @@ # Change Log | ||
| ## [1.2.0] - 2020-07-20 | ||
| ### Added | ||
| - Type definitions. | ||
| ## [1.1.2] - 2017-10-06 | ||
@@ -22,4 +26,5 @@ ### Fixed | ||
| [1.2.0]: https://github.com/igoradamenko/bem-react-helper/compare/v1.1.2...v1.2.0 | ||
| [1.1.2]: https://github.com/igoradamenko/bem-react-helper/compare/v1.1.1...v1.1.2 | ||
| [1.1.1]: https://github.com/igoradamenko/bem-react-helper/compare/v1.1.0...v1.1.1 | ||
| [1.1.0]: https://github.com/igoradamenko/bem-react-helper/compare/v1.0.0...v1.1.0 |
| { | ||
| "name": "bem-react-helper", | ||
| "version": "1.1.2", | ||
| "version": "1.2.0", | ||
| "description": "Allows you to easily manage BEM mods & mixes in React", | ||
@@ -50,3 +50,4 @@ "main": "index.js", | ||
| "index.js" | ||
| ] | ||
| ], | ||
| "types": "index.d.ts" | ||
| } |
| # BEM React Helper | ||
| [<img src="https://igoradamenko.com/funbox/gitbadge.svg" width="235" align="right">](http://funbox.ru/pages/vacancy.html) | ||
| [](https://travis-ci.org/igoradamenko/bem-react-helper) | ||
@@ -10,18 +8,8 @@ [](https://www.npmjs.com/package/bem-react-helper) | ||
| ## Examples | ||
| ## Explanation | ||
| Before: | ||
| There are two main entities in BEM: “blocks” and “elements”. Also there are “modifiers” that can change that ones in some ways. And there are relations between the entities — “mixes”. All of them are ruled by CSS classes, and this is where the pain come from. | ||
| ```jsx | ||
| export default class Block extends Component { | ||
| render() { | ||
| return ( | ||
| <div className={`block ${this.props.visible ? 'block_visible' : ''} ${this.props.type ? `block_type_${this.props.type}` : ''} ${this.props.size ? `block_size_${this.props.size}` : 'block_size_m'} ${this.props.mix}`} /> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
| There're no any native tools in React (or JSX, or even HTML and CSS) to write BEM-related code. So, developers usually write CSS classes using conditions: | ||
| Or: | ||
| ```jsx | ||
@@ -48,2 +36,14 @@ export default class Block extends Component { | ||
| Or in a more compact way: | ||
| ```jsx | ||
| export default class Block extends Component { | ||
| render() { | ||
| return ( | ||
| <div className={`block ${this.props.visible ? 'block_visible' : ''} ${this.props.type ? `block_type_${this.props.type}` : ''} ${this.props.size ? `block_size_${this.props.size}` : 'block_size_m'} ${this.props.mix}`} /> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
| With usage like this: | ||
@@ -55,5 +55,13 @@ | ||
| After: | ||
| And it's totally fine, but it's exhausting and takes a lot of time. | ||
| This helper was built to solve the problem described above. It's created around the convention that developer should pass BEM modifiers through `mods` property, and mixes throught `mix`. So, component invoking described above can be rewritten like this: | ||
| ```jsx | ||
| <Block mods={{ visible: true, type: 'primary', size: 'xxl' }} mix="block2__elem"/> | ||
| ``` | ||
| As you may understand, now it's quite easy to preprocess modifiers, change them, replace with default values, etc. And that's exactly what the helper does. When developer uses the helper, component code usually looks like this: | ||
| ```jsx | ||
| import b from 'bem-react-helper'; | ||
@@ -64,3 +72,3 @@ | ||
| return ( | ||
| <div className={b('block', this.props, { size: s })} /> | ||
| <div className={b('block', this.props, { size: 'm' })} /> | ||
| ); | ||
@@ -71,16 +79,35 @@ } | ||
| With usage like this: | ||
| As you see, there is no any conditions at all. What we have here is the function `b` with three arguments: | ||
| - `name` — entitity name (block or element according to BEM naming); _required_; | ||
| - `props` — props object (in most cases it's exactly `props` of React component, but it also can be built from stratch as | ||
| an object with `mods` and `mix` keys, both are optional); _default: `{}`_; | ||
| - `defaultMods` — object with default values for modifiers; _default: `{}`_. | ||
| That's all. | ||
| Helper is a pretty smart guy. For example, you can pass mix as an array if you need to: | ||
| ```jsx | ||
| <Block mods={{visible: true, type: 'primary', size: 'xxl'}} mix="block2__elem"/> | ||
| <Block mods={{ visible: true, type: 'primary', size: 'xxl' }} mix={['block2__elem', 'block3']}/> | ||
| ``` | ||
| You also can pass mix as an array: | ||
| Or you can use camelCased modifiers that will be converted to regular for CSS kebab-case. | ||
| For example, let's assume that we use `Block` component described above, but with these modifiers: | ||
| ```jsx | ||
| <Block mods={{visible: true, type: 'primary', size: 'xxl'}} mix={['block2__elem', 'block3']}/> | ||
| <Block mods={{ visible: true, type: 'primary', size: 'xxl', buttonSize: 'x' }} mix={['block2__elem', 'block3']}/> | ||
| ``` | ||
| And if you want to use mods or mix in a body of component, or pass other arguments, the best way to do that is: | ||
| The helper will generate `className` value like this: | ||
| ``` | ||
| block block_visible block_type_primary block_size_xxl block_button-size_x block2__elem block3 | ||
| ``` | ||
| Quite easy, huh? | ||
| Also, if you want to use `mods` or `mix` inside the component inself, or pass other arguments, | ||
| the best way to do that is: | ||
| ```jsx | ||
@@ -94,3 +121,3 @@ import b from 'bem-react-helper'; | ||
| return ( | ||
| <div className={b('block', this.props, { size: s })} {...rest}> | ||
| <div className={b('block', this.props, { size: 's' })} {...rest}> | ||
| { | ||
@@ -107,2 +134,12 @@ mods.type === 'primary' && ( | ||
| And if you use build tools like webpack, you can use plugins like [`ProvidePlugin`](https://webpack.js.org/plugins/provide-plugin/) | ||
| to get rid of import state in every component: | ||
| ```js | ||
| // somewhere in a webpack config | ||
| new webpack.ProvidePlugin({ | ||
| b: 'bem-react-helper', | ||
| }) | ||
| ``` | ||
| ## Why? | ||
@@ -113,8 +150,9 @@ | ||
| [of](https://github.com/albburtsev/bem-cn) | ||
| [the](https://github.com/pocotan001/bem-classnames) | ||
| [others](https://github.com/cuzzo/react-bem) | ||
| [hel](https://github.com/pocotan001/bem-classnames)[pers](https://github.com/marcohamersma/react-bem-helper) | ||
| [helpers](https://github.com/marcohamersma/react-bem-helper) | ||
| and created yet another one? | ||
| They bloat code but don't do anything useful. | ||
| I don't like the fact that they bloat my code and make all components strongly vendored to them. | ||
| Also I believe that to write plain classes is faster than to use any wrappers around it. | ||
| So this helper solves just one problem (the main) — it removes conditions for modifiers and mixes in block's declaration. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by32.97%
9679
- Number of lines in readme file
- increased by33.63%
151
No dependency changes