React BEM Components

Super simple components to create BEM styled component.

Components

React BEM comes with multiple built in components

- Wrapper
- Title
- Text
- Button
- Link
- Image

Usage

Each component has named props to aid in building your desired BEM structure

``javascript

import React, { Component } from 'react'
import { Wrapper, Title, Text, Button } from 'react-bem-components';

class MyBEMComponent extends Component {

clickHandler(e) {
console.log('clicked');
}

render() {

const block = 'my-component';

render (
//the first element should use the block as its element. All children use it as the block


Some large text
Click me

);
}
}

/**
rendering this component outputs:

Cool Title

Some large text

Click me

*/

`

Props

Each BEM props comes with the same basic prop types:

`javascript

const propTypes = {
// the element tag e.g. div, h1, p, etc
tag: PropTypes.string,
block: PropTypes.string,
element: PropTypes.string.isRequired,
modifier: PropTypes.string,
// for elements with multiple modifiers required
modifiers: PropTypes.arrayOf(PropTypes.string),
// any non bem related classes
extraClasses: PropTypes.string,
id: PropTypes.string,
// data-attributes
attributes: PropTypes.object
};

``