segmented-control-react

A replica of iOS segmented control component done purely in React.

Usage no npm install needed!

<script type="module">
  import segmentedControlReact from 'https://cdn.skypack.dev/segmented-control-react';
</script>

README

Segmented Control React

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

Preview

Segmented-Control

Variants

Variant preview
Base Base
Dark Dark
Success Success
Error 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>
    );
  }
}
…