https://github.com/bike-js/react-bem
BEM helper for React
https://github.com/bike-js/react-bem
Last synced: over 1 year ago
JSON representation
BEM helper for React
- Host: GitHub
- URL: https://github.com/bike-js/react-bem
- Owner: Bike-JS
- Created: 2020-05-07T09:13:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:15:11.000Z (over 3 years ago)
- Last Synced: 2025-02-21T05:07:16.396Z (over 1 year ago)
- Language: JavaScript
- Size: 105 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React BEM
This is help package for use BEM methodology in React components
## Install
`npm i -S @bikejs/react-bem`
## Usage
Example for use as decorator
```jsx harmony
import React from 'react';
import { BEM } from '@bikejs/react-bem';
@BEM('my-component')
export class Component extends React.PureComponent {
render() {
const { bem } = this.props;
return (
Header
Main
);
}
}
```
Example for use as hook
```jsx harmony
import React from 'react';
import { useBEM } from '@bikejs/react-bem';
export const MyComponent = () => {
const bem = useBEM('my-component');
return (
Header
Main
);
}
```
`className` proxying is also supported
```jsx harmony
import React from 'react';
import { BEM } from '@bikejs/react-bem';
@BEM('my-component')
class Component extends React.Component {
render() {
const { bem } = this.props;
return
;
}
}
@BEM('my-app')
class App extends React.Component {
render() {
const { bem } = this.props;
return ;
}
}
// App render result:
//
```