Segmented Control React

Replica of iOS segmented control component done purely in React. Fully Responsive for all device types.

Preview

Variants

Variant	preview
Base
Dark
Success
Error
Light	White fg

Installation

npm install segmented-control-react —-save

OR

yarn add segmented-control-react

Usage

• For commonJS import syntax

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

• For Es2016

  import { SegmentedControl } from 'segmented-control-react';

Props

Attribute	Type	Description
segments	array	List of segments	required
selected	number	segment index to be selected	default 0
variant	string	variant name	default base
onChangeSegment	event	method to implement logic on click segment	optional

Features

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

Example

…
import { SegmentedControl } from 'segmented-control-react';

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>
    );
  }
}
…