How to use

yarn add @times-tooling/button-set

import ButtonSet from '@times-tooling/button-set'

import { faRocket, faEdit, faSquare } from '@fortawesome/free-solid-svg-icons';

<ButtonSet
    onChange={() => {}}
    value={''}
    name="button-set"
    buttons={[
        { value: 'value', title: 'Click A', icon: faRocket },
        { value: 'value', title: 'Click B', icon: faEdit },
        { value: 'value', title: 'Click C', icon: faSquare },
    ]}
/>

Props

onChange

Fired when the user clicks a button in the set. It should update value in the parent state.

value

The selected button in the set that has a matching value prop

name

The name of the input element

buttons

An array of button configuration objects that have value, title, and an icon

Note: when using font-awesome, you'll need to set up a library of icons in your app, as follows:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';

library.add(faPencilAlt);

...

<ButtonSet buttons=[{ icon: 'pencil-alt' }] />

You can also pass in a specific icon like this:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';

...

<ButtonSet buttons={[{ icon: faPencilAlt }]} />

Development

yarn build

yarn test