nuǝɯ pǝɥsᴉꞁod mǝu

    react-switchable
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.8 • Public • Published

    react-switchable

    react-switchable npmversion 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.

    Install

    npm i react-switchable

    DownloadsWeekly Downloads

    52

    Version

    0.4.8

    License

    MIT

    Unpacked Size

    25 kB

    Total Files

    6

    Last publish

    Collaborators

    • alvarob