react-switchable-next

Note

This is forked from react-switchable with some changes to make it work with react 18 and convert it to function component.

Live demo

Install

npm install react-switchable-next --save

Usage

import Switch, { Item } from "react-switchable-next";
import "react-switchable-next/dist/index.esm.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-next";
import "react-switchable-next/dist/index.esm.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 :

import React, { useState } from "react";

const App = () => {
  const [selectedCountryIndex, setSelectedCountryIndex] = useState(1);
  const countries = [
    { value: "Russia" },
    { value: "Nigeria" },
    { value: "Venezuela" },
    { value: "France" },
  ];

  return (
    <Switch
      name="countries"
      onItemSelected={(selectedIndex) => setSelectedCountryIndex(selectedIndex)}
    >
      {countries.map((country, index) => (
        <Item key={country.value} active={index === selectedCountryIndex} value={country.value}>
          {country.value}
        </Item>
      ))}
    </Switch>
  );
};

export default App;

Data flow from child to parent:

import React, { useState } from "react";
import Switch, { Item } from "react-switchable-next";

const App = () => {
  const [selectedCountry, setSelectedCountry] = useState("Nigeria");

  return (
    <Switch name="countries" onItemChanged={(country) => setSelectedCountry(country)}>
      <Item value="Russia">Russia</Item>
      <Item default value="Nigeria">
        Nigeria
      </Item>
      <Item value="Venezuela">Venezuela</Item>
      <Item value="France">France</Item>
    </Switch>
  );
};

export default App;

Accessible

Created with accessibility in mind. The following gif was made using MacOS Sierra VoiceOver.

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.