react-switchable

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 onItemChanged={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
    onItemChanged={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 = {
    selectedCountryIndex: 1,
    countries: [
      { value: "Russia" },
      { value: "Nigeria" },
      { value: "Venezuela" },
      { value: "France" }
    ]
  }

  render() {
    return (
      <Switch
        onItemSelected={(selectedIndex) => {
          this.setState({
            selectedCountryIndex: selectedIndex
          })
        }}
      >
        {countries.map((country, index) => (
          <Item 
            key={country.value} 
            active={index === selectedCountryIndex} 
            value={country.value}>
              {country.value}
          </Item>
        ))}
      </Switch>
    )
  }
}

Data flow from child to parent:

class App extends React.Commponent {
  state = {
    selectedCountry: "Nigeria"
  }

  render() {
    return (
      <Switch
        onItemChanged={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
onItemChanged	function	No	""	Fires after the selection of an Item.
onItemSelected	function	No	""	Fires when an Item is selected.
children	Array[Item]	Yes	[]	A list of Items.
disable	boolean	No	false	Disables the switch.
arrowSelection	boolean	No	true	Enables the selection of Items with arrow keys.
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 Item.
tabIndex	number	No	0	Sets the tabindex.

Inherits all other properties assigned from the parent component.

Related

react-sn-question

Contributing

All contributions are welcome.

License

MIT license @Alvaro Bernal G.