1. `npm install react-segment-control` 2. Import the component into your project: ```import SegmentedControl from 'react-segment-control'```
npm install react-segment-control1. npm install react-segment-control
2. Import the component into your project:
``import SegmentedControl from 'react-segment-control'`
In the project directory, you can run:
Starts the storybook for this component
Launches the jest/enzyme tests
A simple example:
`
const options = [{ label: 'Option 1', value: 'option_1' }, { label: 'Option 2', value: 'option_2'}]
const handleSelect = val => console.log(val)
return
`
(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
`
Labelling can also be done with a labeller function that takes an option's value as input.`Option ${value}
const options = [{ value: 1 }, { value: 2 }]
return }>`
Options can be uncheckable using the uncheckable prop.``
return
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
`
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
// preselect by key
// preselect by value (this works for objects too, so long as their JSON.stringify results are the same)
// preselect by entire option (under the hood this tries key comparison if keys are provided, and value comparison as a fallback)
``