https://github.com/ethworks/bem-components-react
A factory to create react components that follow BEM methodology with first-class typescript support.
https://github.com/ethworks/bem-components-react
Last synced: about 1 year ago
JSON representation
A factory to create react components that follow BEM methodology with first-class typescript support.
- Host: GitHub
- URL: https://github.com/ethworks/bem-components-react
- Owner: EthWorks
- License: unlicense
- Created: 2020-02-18T13:37:49.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-13T01:45:36.000Z (over 4 years ago)
- Last Synced: 2025-03-23T01:01:59.943Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 343 KB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bem-components-react
A factory to create react components that follow BEM methodology with first-class typescript support.
## Getting started
Installation:
```
yarn add bem-components-react
npm install --save bem-components-react
```
Usage:
```jsx
import { bem } from 'bem-components-react'
// specify a class name and a list of variants afterwards
const Button = bem.button('button', ['large', 'small'])
function MyComponent() {
return Click me
}
```
This component will render to:
```html
Click me
```
### API
```jsx
// omit the second argument if the component doesn't have any modifiers
const Button = bem.button('button')
// specify an array of variants as a second argument
const Button = bem.button('button', ['large', 'small'])
// nest elements inside blocks by specifying it in the name
const Input = bem.button('dialog__input', ['error'])
// to enable a variant, pass a prop to the created component
Click me
// you can pass any other prop to the created component
// you can pass extra classNames to the component
Click me
// will result in
Click me
```
### Using a custom prefix for classes
```jsx
import { withPrefix } from 'bem-components-react'
const bem = withPrefix('myapp')
const Button = bem.button('button', ['large', 'small'])
```
Will render to:
```html
Click me
```