{"id":19213,"library":"babel-plugin-transform-rebem-jsx","title":"babel-plugin-transform-rebem-jsx","description":"Babel plugin for transforming JSX with BEM props into class names using reBEM conventions. Current version 0.3.3, last updated 2016. Allows writing BEM-style props (block, elem, mods, mix) on JSX elements, which are compiled to CSS class strings. Integrates with webpack via DefinePlugin for environment variables. Key differentiator: integrates BEM methodology directly into React JSX, avoiding manual className management. Suitable for projects using BEM naming with React.","status":"maintenance","version":"0.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/rebem/rebem-jsx","tags":["javascript","rebem","react","bem","jsx"],"install":[{"cmd":"npm install babel-plugin-transform-rebem-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-rebem-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-rebem-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Generates BEM class names from block/elem/mods/mix props","package":"rebem-classname","optional":false}],"imports":[{"note":"Plugin is a default export used in Babel config","symbol":"plugin","correct":"import plugin from 'babel-plugin-transform-rebem-jsx'"}],"quickstart":{"code":"// Install: npm i -D babel-plugin-transform-rebem-jsx\n// .babelrc\n{\n  \"plugins\": [\"transform-rebem-jsx\"]\n}\n\n// webpack DefinePlugin to set NODE_ENV\nnew webpack.DefinePlugin({\n  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)\n})\n\n// Component usage\nconst element = <div block=\"button\" mods={{ size: 'large', disabled: true }}></div>;\n// Compiles to: <div class=\"button button_size_large button_disabled\"></div>\n","lang":"javascript","description":"Shows installation, Babel config, webpack DefinePlugin setup, and JSX usage with block and mods props."},"warnings":[{"fix":"Add DefinePlugin to webpack config as shown in quickstart.","message":"process.env.NODE_ENV must be defined at build time via webpack DefinePlugin or similar; missing it will cause runtime errors.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Upgrade to >=0.3.1.","message":"BEM props (block, elem, mods, mix) leak as DOM attributes if not transformed, causing React warnings. v0.3.1 fixes this for React 15.2.0+.","severity":"gotcha","affected_versions":"<0.3.1"},{"fix":"Upgrade to >=0.3.2.","message":"Error when props are missing or null; fixed in v0.3.2.","severity":"gotcha","affected_versions":"<0.3.2"},{"fix":"Upgrade to >=0.3.3.","message":"BEMJSON validation missing; fixed in v0.3.3.","severity":"gotcha","affected_versions":"<0.3.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm i -S rebem-classname","cause":"Missing dependency rebem-classname","error":"Error: Cannot find module 'rebem-classname'"},{"fix":"Upgrade to >=0.3.2 or ensure props are always objects.","cause":"Missing or null props on element","error":"TypeError: Cannot read property 'split' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}