{"id":28377255,"url":"https://github.com/dmitrykrylov/bem-jsx","last_synced_at":"2025-06-26T18:31:54.439Z","repository":{"id":127959710,"uuid":"167268430","full_name":"dmitrykrylov/bem-jsx","owner":"dmitrykrylov","description":"Integrate BEM into your React app gracefully","archived":false,"fork":false,"pushed_at":"2019-02-01T23:26:25.000Z","size":209,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-06T01:23:22.851Z","etag":null,"topics":["bem","jsx","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/dmitrykrylov.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-23T23:11:33.000Z","updated_at":"2022-01-20T19:32:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"2a412cc2-3b1b-40b6-8353-930e9a41cf4e","html_url":"https://github.com/dmitrykrylov/bem-jsx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dmitrykrylov/bem-jsx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrykrylov%2Fbem-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrykrylov%2Fbem-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrykrylov%2Fbem-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrykrylov%2Fbem-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitrykrylov","download_url":"https://codeload.github.com/dmitrykrylov/bem-jsx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrykrylov%2Fbem-jsx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262122724,"owners_count":23262466,"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","jsx","react"],"created_at":"2025-05-30T01:04:21.712Z","updated_at":"2025-06-26T18:31:54.401Z","avatar_url":"https://github.com/dmitrykrylov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bem-jsx\n\n\u003e Integrate BEM into your React app gracefully\n\n[![NPM](https://img.shields.io/npm/v/bem-jsx.svg)](https://www.npmjs.com/package/bem-jsx) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save bem-jsx\n```\n\n## Usage\n\n```jsx\nimport React from \"react\"\nimport block from \"bem-jsx\"\n\nconst Form = block(\"Form\", [\"theme\", \"simple\", \"disabled\"])\n\nconst Example = () =\u003e (\n  \u003cForm as=\"form\" theme=\"xmas\" simple\u003e\n    \u003cForm.Input as=\"input\" type=\"text\" /\u003e\n    \u003cForm.Submit as=\"input\" type=\"submit\" disabled /\u003e\n  \u003c/Form\u003e\n)\n```\n\nIt will produce the following piece of HTML:\n\n```html\n\u003cform class=\"Form Form--theme_xmas Form--simple\"\u003e\n  \u003cinput type=\"text\" class=\"Form__Input\" /\u003e\n  \u003cinput type=\"submit\" disabled class=\"Form__Submit Form__Submit--disabled\" /\u003e\n\u003c/form\u003e\n```\n\n## Reference\n\n`block` function takes 2 arguments:\n\n- `blockClassName` : **string**, required\n- `modifiers` : **Array\\\u003cstring\\\u003e**, optional\n- `config` : **Object**, optional\n\n`config` object reference:\n\n- `elementSeparator`: **string**, optional, _default_: `'__'`\n- `modifierSeparator`: **string**, optional, _default_: `'--'`\n- `modifierValueSeparator`: **string**, optional, _default_: `'_'`\n- `kebabCase`: **string**, optional, _default_: `false`\n\nLet's create a Block. It can do a lot!\n\n```js\nconst Block = block(\"Block\", [\"theme\", \"simple\", \"disabled\"])\n```\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003e\n\u003c/th\u003e\n\u003cth\u003e\nReact JSX\n\u003c/th\u003e\n\u003cth\u003e\nHTML produced\n\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nBlock\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock /\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"Block\"\u003e\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nWith tag specified\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock as=\"span\" /\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cspan class=\"Block\"\u003e\u003c/span\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nElement\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock.Element /\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"Block__Element\"\u003e\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nEverything can be an element!\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock.MillaJovovich /\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"Block__MillaJovovich\"\u003e\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nBoolean modifier\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock simple /\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"Block Block--simple\"\u003e\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nNon-boolean modifier\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock theme=\"dark\" /\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"Block Block--theme_dark\"\u003e\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c!-- \u003ctr\u003e\n\u003ctd\u003e\nIf a modifier prop is a valid HTML attribute, it will be passed down\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n\u003cBlock as=\"button\" disabled\u003eOk\u003cBlock\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cbutton class=\"Block\" disabled\u003eOk\u003c/button\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e --\u003e\n\u003c/table\u003e\n\n## License\n\nMIT © [dmitrykrylov](https://github.com/dmitrykrylov)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrykrylov%2Fbem-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitrykrylov%2Fbem-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrykrylov%2Fbem-jsx/lists"}