https://github.com/waynecz/react-bem-classname
BEM classname generator for react, state friendly
https://github.com/waynecz/react-bem-classname
Last synced: 8 months ago
JSON representation
BEM classname generator for react, state friendly
- Host: GitHub
- URL: https://github.com/waynecz/react-bem-classname
- Owner: waynecz
- Created: 2018-11-26T07:47:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-17T13:54:14.000Z (over 7 years ago)
- Last Synced: 2025-10-01T02:47:22.293Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React BEM className generator
### Supporting facilities
1. [watson-scss](https://github.com/waynecz/Watson) for writing nested BEM fastly and furiously.
2. [watson-snippet](https://github.com/waynecz/watson-snippet) vscode extension for coding faster.
### Install
```bash
npm i react-bem-classname -S
```
### Example
```javascript
import BEMProvider from 'react-bem-classname'
function Human() {
// recommend use bem as variable name cuz
const bem = BEMProvider('human')
const [isHurt, setHurtState] = useState('false')
return (
)
}
```
code above is exactly equal to this:
```jsx
function Human() {
const [isHurt, setHurtState] = useState('false')
return (
)
}
```
### Basic concept
+ Use `::pseudo element` as Block's Element
+ Use `:pseudo class` as Modifier