react-segmented-picker

react-segmented-picker

An iOS style segmented picker for react web

Demo (the bar next to "All Posts")

Install

npm i react styled-components --save-dev
npm i react-segmented-picker

or

yarn add react styled-components -D
yarn add react-segmented-picker

Usage

import React, { useState } from 'react';

import SegmentedPicker from 'react-segmented-picker';

// Demo App
function App() {
  const [selection, setSelection] = useState(0);
  const options = ['Apple', 'Orange', 'Pear', 'Watermelon'];

  return (
    <div className="App">
      <p>You selected</p>
      <p>#{selection}: {options[selection]}</p>

      <SegmentedPicker
        options={options}
        selection={selection}
        onSelectionChange={(newSelection) => {
          setSelection(newSelection);
        }}
      />
    </div>
  );
}

export default App;