react-switchable
A customizable and simple to use React primitive for building switchable components, inspired by react-switch.
Install
npm install react-switchable --saveUsage
import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'
<Switch onValueChange={newValue => console.log('The new value is => ', newValue)}>
<Item value='Hot'>
Hot
</Item>
<Item value='Cold'>
Cold
</Item>
</Switch>You can have as many Item children as you can fit:
import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'
<div>
<h1>What is the capital of Venezuela ?</h1>
<Switch
onValueChange={capital => checkAnswer(capital)}>
<Item value='London'>
London
</Item>
<Item value='Caracas'>
Caracas
</Item>
<Item value='Lagos'>
Lagos
</Item>
<Item value='Beijing'>
Beijing
</Item>
<Item value='Moscow'>
Moscow
</Item>
</Switch>
</div>Data flow
By default the switchable component manages which <Item /> is active internally. You can change that by setting the active attribute in any <Item /> component.
Data flow from parent to child :
class App extends React.Commponent {
state = {
activeCountry: 1,
countries: [
{ value: "Russia" },
{ value: "Nigeria" },
{ value: "Venezuela" },
{ value: "France" }
]
}
render() {
return (
<Switch
onSelection={(selectedIndex) => {
this.setState({
activeCountry: selectedIndex
})
}}
>
{countries.map((country, index) => (
<Item key={index} active={index === activeCountry} value={country.value}>
{country.value}
</Item>
))}
</Switch>
)
}
}Data flow from child to parent:
class App extends React.Commponent {
state = {
selectedCountry: "Nigeria"
}
render() {
return (
<Switch
onValueChange={country =>
this.setState({ selectedCountry: country })
}
>
<Item value="Russia">Russia</Item>
<Item default value="Nigeria">
Nigeria
</Item>
<Item value="Venezuela"> Venezuela </Item>
<Item value="France"> France </Item>
</Switch>
)
}
}Accessible
Created with accessibility in mind. The following gif was made using MacOS
Sierra VoiceOver.
Live demo
API
Switch
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
onValueChange |
function | No | "" | Fires whenever the switch changes inner state. |
onSelection |
function | No | "" | Fires whenever a state is selected. |
disable |
boolean | No | false | Disables the switch. |
tabIndex |
number | No | 0 | Sets the tabIndex. |
Inherits all other properties assigned from the parent component
State | Item
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value |
string | Yes | "" | Represents the Item value. |
active |
boolean | No | false | Sets the Item as active. |
disable |
boolean | No | false | Disables the . |
tabIndex |
number | No | 0 | Sets the tabindex. |
Inherits all other properties assigned from the parent component.
Related
Contributing
All contributions are welcome.
License
MIT license @Alvaro Bernal G.
