{"id":20626715,"url":"https://github.com/coreprocess/react-with-bem","last_synced_at":"2025-04-15T15:21:35.846Z","repository":{"id":45052207,"uuid":"446376892","full_name":"coreprocess/react-with-bem","owner":"coreprocess","description":"BEM for React","archived":false,"fork":false,"pushed_at":"2023-02-19T15:43:51.000Z","size":1254,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T21:51:06.311Z","etag":null,"topics":["bem","css","npm","react","sass","scss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coreprocess.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-01-10T10:28:35.000Z","updated_at":"2024-12-26T12:15:48.000Z","dependencies_parsed_at":"2023-11-30T03:33:40.597Z","dependency_job_id":null,"html_url":"https://github.com/coreprocess/react-with-bem","commit_stats":null,"previous_names":["teamrevin/react-with-bem"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreprocess%2Freact-with-bem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreprocess%2Freact-with-bem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreprocess%2Freact-with-bem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreprocess%2Freact-with-bem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coreprocess","download_url":"https://codeload.github.com/coreprocess/react-with-bem/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248674645,"owners_count":21143760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","css","npm","react","sass","scss"],"created_at":"2024-11-16T13:14:29.041Z","updated_at":"2025-04-15T15:21:35.820Z","avatar_url":"https://github.com/coreprocess.png","language":"TypeScript","readme":"# React with BEM\n\n![npm version](https://badgen.net/npm/v/react-with-bem?icon=npm\u0026label)\n![GitHub checks](https://badgen.net/github/checks/teamrevin/react-with-bem/publish?icon=github\u0026label=GitHub)\n\n`react-with-bem` implements the [BEM](http://getbem.com/) methodology for React.\n\n## Installation\n\nUse your favourite manager to install the [package](https://www.npmjs.com/package/react-with-bem):\n\n```sh\nyarn add react-with-bem\n```\n\n```sh\nnpm install react-with-bem --save\n```\n\n## Usage\n\n```tsx\nimport React from \"react\";\nimport { BEM } from \"react-with-bem\";\n\n// import styles as module\n// https://github.com/css-modules/css-modules\nimport styles from \"./App.module.scss\";\n\n// use BEM annotations whenever applicable\nexport function App() {\n    return (\n        // activate BEM and inject styles\n        \u003cBEM styles={styles}\u003e\n            {\n                // set BEM block by using $block\n                // output: \u003cmain class=\"app\"\u003e\n            }\n            \u003cmain $block=\"app\"\u003e\n                {\n                    // set a BEM element by using $element\n                    // output: \u003cdiv class=\"app__container\"\u003e\n                }\n                \u003cdiv $element=\"container\"\u003e\n                    {\n                        // set BEM modifier by using $modifier (multiple modifiers are possible)\n                        // output:\n                        //     \u003cdiv class=\"app__container__hello\u003e when emphasized === false\n                        //     \u003cdiv class=\"app__container__hello app__container__hello--emphasized\"\u003e when emphasized === true\n                    }\n                    \u003cdiv\n                        $element=\"hello\"\n                        $modifier={{\n                            emphasized: true,\n                        }}\n                    \u003e\n                        Hello World!\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/main\u003e\n        \u003c/BEM\u003e\n    );\n}\n```\n\n```scss\n.app {\n    background-color: red;\n    color: white;\n\n    \u0026__container {\n        max-width: fit-content;\n        margin: 0 auto;\n\n        \u0026__hello {\n            font-size: 2rem;\n\n            \u0026--emphasized {\n                font-weight: bold;\n            }\n        }\n    }\n}\n```\n\n**Please note:**\n\n-   The use of CSS modules is _optional_. If you do not want to use CSS modules, leave out the `styles` parameter of the `\u003cBEM\u003e` component.\n-   If you set the class name map via the `styles` parameter of the `\u003cBEM\u003e` component, it will be used to map the vanilla BEM class names to the CSS module class names generated by your compiler framework.\n-   **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.\n\n## ESLint\n\nPlease add the following rule to your ESLint configuration to suppress errors related to the `$block`, `$element`, and `$modifier` attributes.\n\n```json\n{\n    \"rules\": {\n        \"react/no-unknown-property\": [\n            2,\n            { \"ignore\": [\"$block\", \"$element\", \"$modifier\"] }\n        ]\n    }\n}\n```\n\n## Example\n\nYou can find a complete example [here](example).\n\n## Reference\n\n### `\u003cBEM\u003e` component\n\nThe `\u003cBEM\u003e` activated the BEM processing for its children tree. It accepts one optional property.\n\n-   `styles?: Record\u003cstring, string\u003e`: 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.\n\n### BEM properties\n\nThe 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.\n\n-   `$block?: string`: Name of the BEM block. Using this property will reset the calculated BEM path.\n-   `$element?: string | string[]`: Name of the BEM element or nested BEM elements. The name or names will be appended to the calculated BEM path.\n    -   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.\n-   `$modifier?: string | string[] | Record\u003cstring, boolean\u003e`: 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.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreprocess%2Freact-with-bem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoreprocess%2Freact-with-bem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreprocess%2Freact-with-bem/lists"}