react-switchable
A customizable and simple to use React primitive for building switchable components, inspired by react-switch.
Install
npm install react-switchable --save
Usage
import Switch Item from 'react-switchable';import 'react-switchable/dist/main.css' <Switch ="temperature" => <Item ='Hot'> Hot </Item> <Item ='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 ="countries" => <Item ='London'> London </Item> <Item ='Caracas'> Caracas </Item> <Item ='Lagos'> Lagos </Item> <Item ='Beijing'> Beijing </Item> <Item ='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 :
Commponent state = selectedCountryIndex: 1 countries: value: "Russia" value: "Nigeria" value: "Venezuela" value: "France" { return <Switch name="countries" onItemSelected= { this } > countries </Switch> }
Data flow from child to parent:
Commponent state = selectedCountry: "Nigeria" { return <Switch name="countries" onItemChanged=this> <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 |
---|---|---|---|---|
name |
string | Yes | "" | Unique global identifier. |
children |
Array[Item] | Yes | [] | A list of Items. |
onItemChanged |
function | No | "" | Fires after the selection of an Item. |
onItemSelected |
function | No | "" | Fires when an Item is selected. |
disable |
boolean | No | false | Disables the switch. |
arrowSelection |
boolean | No | true | Enables the selection of Items with arrow keys. |
customOverlay |
Overlay | No | undefined | Enables the use of a custom overlay React component. |
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 Item. |
default |
boolean | No | false | Which Item should be active by default. |
Inherits all other properties assigned from the parent component.
Overlay
Prop | Type | Required | Default | Description |
---|---|---|---|---|
selectedIndex |
number | Yes | "" | The selected Item index. |
totalItems |
number | Yes | "" | The total number of Items. |
Inherits all other properties assigned from the parent component.
Related
Contributing
All contributions are welcome.
License
MIT license @Alvaro Bernal G.