# bem-react-component-creator

> Helpers to create BEM like React components

Latest version **1.2.0** (published 2017-12-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install bem-react-component-creator
pnpm add bem-react-component-creator
yarn add bem-react-component-creator
bun add bem-react-component-creator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2017-12-09 |
| First published | 2017-12-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Victor Trejo |
| Maintainers | xvicmanx |
| Keywords | BEM, React |

## Links

- npm: https://www.npmjs.com/package/bem-react-component-creator
- Repository: https://github.com/xvicmanx/bem-react-component-creator
- Homepage: https://github.com/xvicmanx/bem-react-component-creator#readme
- Issues: https://github.com/xvicmanx/bem-react-component-creator/issues
- npm.io page: https://npm.io/package/bem-react-component-creator

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2017-12-09
- 1.1.0 — 2017-12-09

## README

# BEM React component creator
Helpers to create BEM like React components/
## Example

```shell 
$ npm install bem-react-component-creator --save
```

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import BemComponentsCreator from 'bem-react-component-creator';

const PostBEM = BemComponentsCreator('post');
const Post = PostBEM.block('div');
const Button = (props) => {
  return <button {...props}>{props.children}</button>
};
const Picture = PostBEM.element('img', 'picture');
const Title = PostBEM.element('h2', 'title', 'awesome', 'large');
const Phrase = PostBEM.element('p', 'phrase');
const ShareButton = PostBEM.element(Button, 'share-button', 'success');
  
ReactDOM.render(
  <Post>
      <Picture
          src="https://http://via.placeholder.com/50x50"
          alt="Post illustration"
      />
      <Title>Test title</Title>
      <Phrase>
          An awesome phrase
      </Phrase>
      <Phrase modifiers="emphasized,colorful">
          An awesome phrase
      </Phrase>
      <ShareButton>
        Share!
      </ShareButton>
  </Post>,
  document.getElementById('root')
);

```

It will render

```html
  <div className="post">
    <img
      alt="Post illustration"
      className="post__picture"
      src="https://http://via.placeholder.com/50x50"
    />
    <h2
      className="post__title post__title--awesome post__title--large"
    >
      Test title
    </h2>
    <p className="post__phrase">
      An awesome phrase
    </p>
    <p className="post__phrase post__phrase--emphasize post__phrase--colorful"
    >
      An awesome phrase
    </p>
    <button class="post__share-button post__share-button--success">
      Share!
    </button>
  </div>

```

---
_Source: https://npm.io/package/bem-react-component-creator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._