react-segmented-control-ios v2.1.5

react-segmented-control-ios

Replica of iOS segmented control component done purely in React. Fully Responsive for all device types. Typescript definition file(d.ts) included.

Preview

Variants

Variant	preview
Base
Dark
Success
Error
Light	White fg

Installation

npm install react-segmented-control-ios —-save

OR

yarn add react-segmented-control-ios

Usage

• For commonJS import syntax

  const SegmentedControl = require('react-segmented-control-ios');

• For Es2016

  import SegmentedControl from 'react-segmented-control-ios';

Props

Features

• Disable segment : add disabled: true to segment object as shown in the example below to disable that particular segment

Example

…
import SegmentedControl from 'react-segmented-control-ios';

const segments = [
  { name: 'All' },
  { name: 'Unread', disabled: true },
  { name: 'Drafts' },
  { name: 'Trash' },
  { name: 'Pins' }
];

function handleChange(index) {
    console.log(`selected index : ${index}`);
}

class App extends Component {
  state = {
      segments: segments,
      selected: 0
  };
  
  render() {
    return (
      <div className="App">
        <SegmentedControl
            segments={this.state.segments}
            selected={this.state.selected} 
            variant="base"
            onChangeSegment={handleChange}           
        />        
      </div>
    );
  }
}
…