Naughty Programmer's Madness

    segmented-control-react

    2.1.3 • Public • Published

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

    Install

    npm i segmented-control-react

    DownloadsWeekly Downloads

    296

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    1.85 MB

    Total Files

    25

    Last publish

    Collaborators

    • chaoticbit