flute-ui-component

A component that encapsulates the common behaviour amongst components that follow the flute-ui components methodology.

Installation

npm install @flute-ui/component -S

Quick Start

Start by defining your component like this

import React, {Component} from 'react'
import FuiComponent from '@flute-ui/component'

export default class Btn extends Component {

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

Then when used as follows...

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

It will render as follows:

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

Problems That It Solves

TODO