https://github.com/dmitrykrylov/bem-jsx
Integrate BEM into your React app gracefully
https://github.com/dmitrykrylov/bem-jsx
bem jsx react
Last synced: 6 months ago
JSON representation
Integrate BEM into your React app gracefully
- Host: GitHub
- URL: https://github.com/dmitrykrylov/bem-jsx
- Owner: dmitrykrylov
- Created: 2019-01-23T23:11:33.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-01T23:26:25.000Z (almost 7 years ago)
- Last Synced: 2025-06-06T01:23:22.851Z (7 months ago)
- Topics: bem, jsx, react
- Language: JavaScript
- Size: 204 KB
- Stars: 18
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bem-jsx
> Integrate BEM into your React app gracefully
[](https://www.npmjs.com/package/bem-jsx) [](https://standardjs.com)
## Install
```bash
npm install --save bem-jsx
```
## Usage
```jsx
import React from "react"
import block from "bem-jsx"
const Form = block("Form", ["theme", "simple", "disabled"])
const Example = () => (
)
```
It will produce the following piece of HTML:
```html
```
## Reference
`block` function takes 2 arguments:
- `blockClassName` : **string**, required
- `modifiers` : **Array\**, optional
- `config` : **Object**, optional
`config` object reference:
- `elementSeparator`: **string**, optional, _default_: `'__'`
- `modifierSeparator`: **string**, optional, _default_: `'--'`
- `modifierValueSeparator`: **string**, optional, _default_: `'_'`
- `kebabCase`: **string**, optional, _default_: `false`
Let's create a Block. It can do a lot!
```js
const Block = block("Block", ["theme", "simple", "disabled"])
```
React JSX
HTML produced
Block
```js
```
```html
```
With tag specified
```js
```
```html
```
Element
```js
```
```html
```
Everything can be an element!
```js
```
```html
```
Boolean modifier
```js
```
```html
```
Non-boolean modifier
```js
```
```html
```
## License
MIT © [dmitrykrylov](https://github.com/dmitrykrylov)