segmented-control-react

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
segmented-control-react
222.1.34 years ago4 years agoMinified + gzip package size for segmented-control-react in KB

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