/react-switchable

A react primitive for building switchable components

Primary LanguageJavaScriptMIT LicenseMIT

react-switchable

react-switchable npm version License



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

Try it online

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.