{"id":18264853,"url":"https://github.com/bem/bem-react-components","last_synced_at":"2025-08-23T19:03:26.570Z","repository":{"id":66110156,"uuid":"65546755","full_name":"bem/bem-react-components","owner":"bem","description":"Components library for develop with React and BEM methodology","archived":false,"fork":false,"pushed_at":"2018-04-17T20:47:16.000Z","size":670,"stargazers_count":30,"open_issues_count":15,"forks_count":8,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-20T19:17:29.555Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","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":"2016-08-12T10:57:03.000Z","updated_at":"2024-10-04T01:00:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"e66331e3-b8a4-4a59-aa93-8587a88f47c2","html_url":"https://github.com/bem/bem-react-components","commit_stats":{"total_commits":66,"total_committers":12,"mean_commits":5.5,"dds":0.7575757575757576,"last_synced_commit":"58e05114be7d6a949be6c3f15f9bf78d6cefabca"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bem","download_url":"https://codeload.github.com/bem/bem-react-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247252039,"owners_count":20908613,"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":[],"created_at":"2024-11-05T11:16:19.744Z","updated_at":"2025-04-04T21:30:54.675Z","avatar_url":"https://github.com/bem.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BEM React Components\n\n`bem-react-components` is an library that provides a set of visual components build with [bem-react-core].\nReact Components are called blocks according to BEM methodology. Check [bem-info] for deeper dive.\n\n:construction: Hard Work is in Progress :construction:\n\n## Blocks\n\n* [Attach](blocks/Attach/)\n* [Button](blocks/Button)\n* [CheckBox](blocks/CheckBox)\n* [CheckBoxGroup](blocks/CheckBoxGroup)\n* [Dropdown](blocks/Dropdown)\n* [Icon](blocks/Icon)\n* [Image](blocks/Image)\n* [KeyCodes](blocks/KeyCodes)\n* [Link](blocks/Link)\n* [Menu](blocks/Menu)\n* [Modal](blocks/Modal)\n* [Popup](blocks/Popup)\n* [ProgressBar](blocks/ProgressBar)\n* [Radio](blocks/Radio)\n* [RadioGroup](blocks/RadioGroup)\n* [Select](blocks/Select)\n* [Spin](blocks/Spin)\n* [TextArea](blocks/TextArea)\n* [TextInput](blocks/TextInput)\n\n## Build\n\nRight now `bem-react-components` is heavily relying on assemble, so it's necessary to use one.\nThere are several implementations:\n\n* [webpack-bem-loader]\n* [babel-plugin-bem-import]\n\n\nFor fast start you could use [create-bem-react-app].\n\n### Webpack\n\nExample of `webpack.conf.js`\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.(js)$/,\n      include: ['./node_modules/bem-react-components', './src'],\n      use: [\n        {\n          loader: 'webpack-bem-loader',\n          options: {\n            levels: [\n              './node_modules/bem-react-components/blocks',\n              './src/my-awesome-blocks'\n            ],\n            techs: ['js', 'css']\n          }\n        },\n        {\n          loader: 'babel-loader',\n          options: { ... }\n        }\n      ]\n    }\n  ]\n}\n```\n\nTo use more options of `bem-loader` check [docs].\n\n### Babel\n\nNB: Babel couldn't build css files, only js and js-like.\n\nExample of `.babelrc`\n\n```json\n{\n  \"presets\": [[\"es2015\", { \"loose\":true }], \"react\"],\n  \"plugins\": [\n    [\"bem-import\", {\n      \"levels\": [\n        \"./node_modules/bem-react-components/blocks\",\n        \"./src/my-awesome-blocks\"\n      ]\n    }]\n  ]\n}\n```\n\nTo use more options of `bem-import` check [docs](https://github.com/bem/babel-plugin-bem-import#options).\n\n## Maintainers\n\n* [veged](https://github.com/veged)\n* [awinogradov](https://github.com/awinogradov)\n* [Yeti-or](https://github.com/Yeti-or)\n\n## License\n\nCode and documentation © 2017 YANDEX LLC. Code released under the [Mozilla Public License 2.0](LICENSE.txt).\n\n[bem-react-core]: https://github.com/bem/bem-react-core\n[bem-info]: https://bem.info\n[webpack-bem-loader]: https://github.com/bem/webpack-bem-loader\n[docs]: https://github.com/bem/webpack-bem-loader#options\n[babel-plugin-bem-import]: https://github.com/bem/babel-plugin-bem-import\n[create-bem-react-app]: https://github.com/bem/create-bem-react-app\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbem%2Fbem-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbem%2Fbem-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbem%2Fbem-react-components/lists"}