A hook to generate BEM styled string to use on
classNames
for react components
npm install --save @shinspiegel/use-bem-css
import React from "react";
import { useBemCss } from "@shinspiegel/use-bem-css";
const App = () => {
const { button, buttonInput, buttonLabel, buttonSpan } = useBemCss({
className: "button",
blocks: ["button"],
elements: ["label", "input", "span"],
});
return (
<div className={button}>
<label className={buttonLabel}>
<span className={buttonSpan}>Label Text</span>
<button type="button" className={buttonInput}>
Info
</button>
</label>
</div>
);
};
It will generate an object with BEM styles strings to use on the react components as values for classNames
.
const { button, buttonInput, buttonLabel, buttonSpan } = useBemCss({
className: "button",
blocks: ["button"],
elements: ["label", "input"],
});
console.log(button); // "button"
console.log(buttonInput); // "button__input"
console.log(buttonLabel); // "button__label"
You can add modifier on the classes. To be active you need to pass a property isActive
, otherwise it will not allow. If a modifier does not provide a array of with the affected items it will not generate.
const { button, buttonInput, buttonLabel, buttonSpan } = useBemCss({
className: "button",
blocks: ["button"],
elements: ["label", "input"],
[{ modifier: "white", isActive: true }]
});
console.log(button); // "button button--white"
console.log(buttonInput); // "button__input button__input--white"
console.log(buttonLabel); // "button__label button__label--white"
You can add modifier on the classes. To be active you need to pass a property isActive
, otherwise it will not allow. If a modifier does not provide a array of with the affected items it will not generate.
const { button, buttonInput, buttonLabel, buttonSpan } = useBemCss({
className: "button",
blocks: ["button"],
elements: ["label", "input"],
[{ modifier: "white", isActive: true, affects: ["label"] }]
});
console.log(button); // "button"
console.log(buttonInput); // "button__input"
console.log(buttonLabel); // "button__label button__label--white"
In some cases you may need to add some extra block level classes, in this cases you just need to add extra items in the block.
const { button, buttonInput, buttonLabel, buttonSpan } = useBemCss({
className: "button",
blocks: ["buttonBase", "alternativeButton"],
elements: ["label", "input"],
[{ modifier: "white", isActive: true, affects: ["label"] }]
});
console.log(button); // "base-button alternative-button"
console.log(buttonInput); // "base-button__input alternative-button__input"
console.log(buttonLabel); // "base-button__label alternative-button__label base-button__label--white alternative-button__label--white"
MIT © ShinSpiegel
This hook is created using create-react-hook.