Обертка над React.Component для удобной работы в рамках методологии bemponent для React.
npm i bemponent
Компоненты bemponent являются полностью совместимыми с классическими React компонентами, что дает возможность смешивать классический react код с кодом в терминах методологии bemponent
Открыть Демо на Codesandbox
index.js:
import React from 'react';
import Button from './Button.js';
ReactDOM.render(<div>
<Button
theme="primary"
size="m"
/>Fisrt</Button>
<Button
theme="secondary"
size="s"
/>Fisrt</Button>
</div>,
root
);
Button.js:
import React from 'react';
import Component from 'bemponent';
import {merge} from 'lodash';
class Button extends Component {
getModDeps() {
return [
...super.getModDeps(),
'theme',
'size'
]
}
render() {
const {children} = this.props;
return (
<button
className={this.genClassName()}
/>
{children}
</button>
);
}
}
export default Button;
Button.css:
.Button {
font-family: inherit;
text-align: center;
}
.Button_Size_L {
line-height: 36px;
height: 36px;
}
.Button_Size_M {
line-height: 36px;
height: 36px;
}
.Button_Theme_Primary {
backgorund-color: red;
}
.Button_Theme_Secondary {
backgorund-color: grey;
}
- Краткое описание технологии
- Установка
- Быстрый старт
- Методология
- Почему bemponent?
- Компонент
- Компонент-Элемент(????)
- Модификатор
- Компонент с динамическим состоянием
- Компонент без динамического состояния