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 
  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.

react-sn-question

Contributing

All contributions are welcome.

License

MIT license @Alvaro Bernal G.

AlvaroBernalG/react-switchable