react-switchable

Install

npm install react-switchable --save

Usage

import Switch, { Item } from 'react-switchable';
import 'react-switchable/dist/main.css'

<Switch 
  name="temperature"
  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
    name="countries"
    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
        name="countries"
        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
        name="countries"
        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 -----|------|----------|---------|------------- 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

react-sn-question

Contributing

All contributions are welcome.

License

MIT license @Alvaro Bernal G.