{"id":16349463,"url":"https://github.com/jednano/bem-join","last_synced_at":"2025-09-15T02:34:34.763Z","repository":{"id":25700439,"uuid":"119908300","full_name":"jednano/bem-join","owner":"jednano","description":"A function used to construct BEM class names.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:34:15.000Z","size":1526,"stargazers_count":8,"open_issues_count":38,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-23T16:38:36.687Z","etag":null,"topics":["bem","block","class","classname","css","curry","element","join","modifiers","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jednano.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-01T23:57:12.000Z","updated_at":"2023-03-17T12:10:34.000Z","dependencies_parsed_at":"2023-01-14T03:12:02.129Z","dependency_job_id":null,"html_url":"https://github.com/jednano/bem-join","commit_stats":null,"previous_names":["jedmao/bem-join"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/jednano/bem-join","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fbem-join","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fbem-join/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fbem-join/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fbem-join/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jednano","download_url":"https://codeload.github.com/jednano/bem-join/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jednano%2Fbem-join/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275195114,"owners_count":25421712,"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","status":"online","status_checked_at":"2025-09-15T02:00:09.272Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","block","class","classname","css","curry","element","join","modifiers","react"],"created_at":"2024-10-11T00:59:50.911Z","updated_at":"2025-09-15T02:34:34.720Z","avatar_url":"https://github.com/jednano.png","language":"TypeScript","readme":"# bem-join\n\n[![GitHub Actions](https://github.com/jedmao/bem-join/workflows/Node%20CI/badge.svg?event=push)](https://github.com/jedmao/bem-join/actions)\n[![NPM version](http://img.shields.io/npm/v/bem-join.svg?style=flat)](https://www.npmjs.org/package/bem-join)\n[![npm license](http://img.shields.io/npm/l/bem-join.svg?style=flat-square)](https://www.npmjs.org/package/bem-join)\n[![codecov](https://codecov.io/gh/jedmao/bem-join/branch/master/graph/badge.svg)](https://codecov.io/gh/jedmao/bem-join)\n[![BundlePhobia Minified](https://badgen.net/bundlephobia/min/bem-join?label=min)](https://bundlephobia.com/result?p=bem-join)\n[![BundlePhobia Minified + gzip](https://badgen.net/bundlephobia/minzip/bem-join?label=min%2Bgzip)](https://bundlephobia.com/result?p=bem-join)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Unicorn Approved](https://img.shields.io/badge/unicorn-approved-ff69b4.svg)](https://twitter.com/sindresorhus/status/457989012528316416?ref_src=twsrc%5Etfw\u0026ref_url=https%3A%2F%2Fwww.quora.com%2FWhat-does-the-unicorn-approved-shield-mean-in-GitHub)\n\n[![npm](https://nodei.co/npm/bem-join.svg?downloads=true)](https://nodei.co/npm/bem-join/)\n\nA single, [configurable](#custom-separators) function used to construct [BEM](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) class names.\n\n- No dependencies.\n- Super tiny footprint @ under 500 bytes (min + gzip).\n- Works great with or without [React](http://facebook.github.io/react/).\n- Generated [TypeScript](https://www.typescriptlang.org/) definitions packaged with each build/release.\n\n## Installation\n\n```\n$ npm install bem-join\n```\n\n## Usage\n\nThe `bemJoin` function can be used to construct BEM class names. In most cases, you can just import this module and use it directly in each component. To illustrate this, let's create a simple `Section` component:\n\n```jsx\n// /src/components/Section.jsx\nimport { bemJoin } from 'bem-join';\n\nconst b = bemJoin('section');\n```\n\nThe above example uses the default options of `__` for the element separator and `--` for the modifiers. If you need to customize the element and modifier separators, see the [Custom Separators](#custom-separators) section below.\n\nThe new `b` function from above can be called in two different ways:\n\n### `b( [blockModifiers] )`\n\nConstructs the BEM block class names (e.g., `foo foo--mod1 foo--mod2`).\n\nSee the [`BEMModifiers`](#bemmodifiers-interface) section below for the modifiers interface.\n\n### `b( elementName [, elementModifiers] )`\n\nConstructs the BEM element class names (e.g., `foo__bar foo__bar--mod1 foo__bar--mod2)`).\n\nSee the [`BEMModifiers`](#bemmodifiers-interface) section below for the modifiers interface.\n\n_Let's see it in action!_\n\n```jsx\nexport const Section = ({ children, heading, isDark, isExpanded }) =\u003e (\n  \u003csection className={b({ dark: isDark })}\u003e\n    \u003ch1 className={b('heading')}\u003e{heading}\u003c/h1\u003e\n    \u003cdiv className={b('body', { expanded: isExpanded })}\u003e{children}\u003c/div\u003e\n  \u003c/section\u003e\n);\n```\n\nIf `isDark` and `isExpanded` props were both truthy, the result would be the\nfollowing HTML:\n\n```html\n\u003csection class=\"section section--dark\"\u003e\n  \u003ch1 class=\"section__heading\"\u003e\n    Heading\n  \u003c/h1\u003e\n  \u003cdiv class=\"section__body section__body--expanded\"\u003e\n    children\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\nOf course, if `isDark` and `isExpanded` were falsey, no `--dark` or `--expanded` modifiers would be constructed for them.\n\nFor ultimate reuse, you might consider allowing all of your components to accept an optional `blockName` prop that changes the default block name. To do this, you just need to move your first `bem-join` call inside of your render function. Here's an example of what that would look like:\n\n```jsx\nexport const Foo = ({ blockName, children }) =\u003e {\n  const b = bemJoin(blockName || 'foo');\n  return \u003cdiv className={b()}\u003e{children}\u003c/div\u003e;\n};\n```\n\n### `BEMModifiers` Interface\n\nAll modifiers must be provided as a `Record` object with `Boolean` or `undefined` values:\n\n```ts\nexport type BEMModifiers = Record\u003cstring, boolean | undefined\u003e;\n```\n\n### Custom Separators\n\nIf your application requires custom element and modifier separators, you can easily do so by creating your own module that calls this one with configuration options as the first argument. Export the result of that and you can reuse it throughout your application. Here's an example:\n\n```jsx\n// ./src/helpers/bem-join.js\nimport { bemJoin as _bemJoin } from 'bem-join';\n\nexport const bemJoin = _bemJoin({\n  elementSeparator: '__', // \u003c-- default\n  modifierSeparator: '--', // \u003c-- default\n});\n```\n\nThe exported function is now ready to be used in your application. Here's an example import for a component:\n\n```jsx\nimport { bemJoin } from '../helpers/bem-join';\n```\n\nFrom here, everything is the same as previously stated in the [Usage](#usage) section.\n\n## Testing\n\nRun the following command:\n\n```\n$ npm test\n```\n\n.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjednano%2Fbem-join","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjednano%2Fbem-join","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjednano%2Fbem-join/lists"}