https://github.com/coreprocess/react-with-bem
BEM for React
https://github.com/coreprocess/react-with-bem
bem css npm react sass scss
Last synced: 10 months ago
JSON representation
BEM for React
- Host: GitHub
- URL: https://github.com/coreprocess/react-with-bem
- Owner: coreprocess
- Created: 2022-01-10T10:28:35.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-19T15:43:51.000Z (almost 3 years ago)
- Last Synced: 2025-03-28T21:51:06.311Z (10 months ago)
- Topics: bem, css, npm, react, sass, scss
- Language: TypeScript
- Homepage:
- Size: 1.2 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React with BEM
`react-with-bem` implements the [BEM](http://getbem.com/) methodology for React.
## Installation
Use your favourite manager to install the [package](https://www.npmjs.com/package/react-with-bem):
```sh
yarn add react-with-bem
```
```sh
npm install react-with-bem --save
```
## Usage
```tsx
import React from "react";
import { BEM } from "react-with-bem";
// import styles as module
// https://github.com/css-modules/css-modules
import styles from "./App.module.scss";
// use BEM annotations whenever applicable
export function App() {
return (
// activate BEM and inject styles
{
// set BEM block by using $block
// output:
}
{
// set a BEM element by using $element
// output:
}
{
// set BEM modifier by using $modifier (multiple modifiers are possible)
// output:
// when emphasized === true
}
Hello World!
);
}
```
```scss
.app {
background-color: red;
color: white;
&__container {
max-width: fit-content;
margin: 0 auto;
&__hello {
font-size: 2rem;
&--emphasized {
font-weight: bold;
}
}
}
}
```
**Please note:**
- The use of CSS modules is _optional_. If you do not want to use CSS modules, leave out the `styles` parameter of the `` component.
- If you set the class name map via the `styles` parameter of the `` component, it will be used to map the vanilla BEM class names to the CSS module class names generated by your compiler framework.
- **Good to know:** BEM class names will be filtered out if they are missing in the provided class name map. It can happen if the Saas compiler filters out empty CSS classes. It is not a problem, but it might confuse you if you inspect the generated class names in the DOM inspector.
## ESLint
Please add the following rule to your ESLint configuration to suppress errors related to the `$block`, `$element`, and `$modifier` attributes.
```json
{
"rules": {
"react/no-unknown-property": [
2,
{ "ignore": ["$block", "$element", "$modifier"] }
]
}
}
```
## Example
You can find a complete example [here](example).
## Reference
### `` component
The `` activated the BEM processing for its children tree. It accepts one optional property.
- `styles?: Record`: Use this optional property to provide the imported CSS module class name map. If provided, it will be used to map the vanilla BEM class names to the CSS module class names generated by your compiler framework.
### BEM properties
The library activates the following optional BEM properties available on all components. The BEM properties will be removed and translated to the `className?: string` property. So you should apply the BEM properties only to components that provide the `className` property.
- `$block?: string`: Name of the BEM block. Using this property will reset the calculated BEM path.
- `$element?: string | string[]`: Name of the BEM element or nested BEM elements. The name or names will be appended to the calculated BEM path.
- Note: You can also use leading dots to navigate upwards of the element hierarchy. A single dot has no effect, whereas each additional dot removes the last element from the calculated BEM path.
- `$modifier?: string | string[] | Record`: Name or names of the BEM modifier to be applied. If the map annotation is used, only the ones who evaluate to `true` will be applied.