@ifyio/react-ui-component v0.2.0

react-ui-component

An <UiComponent /> component that encapsulates some common behaviour that is often needed by UI components that are styled using BEM

Installation

npm install @ifyio/react-ui-component -S

Usage

Start by defining your component like this

import React, {Component} from 'react'
import UiComponent from 'react-ui-component'

export default class Btn extends Component {

  render () {
    return (
      <UiComponent className="Btn" as="button" {...this}>
        <span className="Btn-contents">{this.props.children}</span>
      </UiComponent>
    )
  }
}

Then you can define styles for this component as follows (Using the BEM naming convention as defined by Suit CSS):

.Btn {
  background-color: black;
  color: white;
}

.Btn--primary {
  background-color: green;
}

This component can then be used as follows:

<Btn kind="primary :fillsParent" classes={{foo: true, bar: false}}>Hello</Btn>

Which will render as follows:

<button class="UiComponent UiComponent--fillsParent Btn Btn--primary foo">
  <span class="Btn-contents">Hello</span>
</button>