0.1.5 • Published 5 years ago
react-segment-control v0.1.5
Installation
npm install react-segment-control
- Import the component into your project:
import SegmentedControl from 'react-segment-control'
Available Scripts
In the project directory, you can run:
npm run storybook
Starts the storybook for this component
npm test
Launches the jest/enzyme tests
Usage
A simple example:
const options = [{ label: 'Option 1', value: 'option_1' }, { label: 'Option 2', value: 'option_2'}]
const handleSelect = val => console.log(val)
return <SegmentedControl options={options} onSelect={handleSelect} />
(Recommended) Options can have keys included, for better tracking in the loop
const options = [{
label: 'True',
value: { flag: true },
key: 'true_opt'
}, {
label: 'False',
value: { flag: false },
key: 'false_opt'
}]
const handleSelect = val => console.log(val)
return <SegmentedControl options={options} onSelect={handleSelect} />
Labelling can also be done with a labeller
function that takes an option's value as input.
const options = [{ value: 1 }, { value: 2 }]
return <SegmentedControl options={options} labeller={value => `Option ${value}`}>
Options can be uncheckable using the uncheckable
prop.
return <SegmentedControl options={options} uncheckable />
Individual options can be disabled by adding a disabled
flag to an option.
const options = [{ label: 'Option 1', value: 'option_1', disabled: true }, { label: 'Option 2', value: 'option_2'}]
const handleSelect = val => console.log(val)
return <SegmentedControl options={options} onSelect={handleSelect} />
Options can be pre-selected in a variety of ways using the preselect
prop.
const options = [{
label: 'Option 1',
value: 'option 1',
key: 'opt_1'
}, {
label: 'Option 2',
value: 'option 2',
key: 'opt_2'
}]
// preselect by array index of options
<SegmentedControl options={options} preselect={ {index: 1} }>
// preselect by key
<SegmentedControl options={options} preselect={ {key: 'opt_1'} }>
// preselect by value (this works for objects too, so long as their JSON.stringify results are the same)
<SegmentedControl options={options} preselect={ {value: 'option 1'} }>
// preselect by entire option (under the hood this tries key comparison if keys are provided, and value comparison as a fallback)
<SegmentedControl options={options} preselect={options[0]}>