Switch, Radio and Checkbox in React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
components
docs
stories
tests
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE.md
README.md
demo.gif
package.json
tag.gif
yarn.lock

README.md

react-controls

codecov Build Status npm GitHub license semantic-release

A set of components like checkboxes, switches and radio buttons.

Normal Mode Tag Mode

Installation

npm install --save react-controls

This package consists of 2 components:

<Toggle/>

Basic Usage

import {Toggle} from 'react-controls';

export default class X extends React.Component{
 render() {
    <Toggle
      name='story1'
      label='hello'
      disabled
      count={6}
      type='radio'
      value={true}
    />
   }
}

Props

prop name defaultValue type
attributes {} Sometimes you may need to add some custom attributes to the root tag of the component. attributes will accept an object where the key and values will be those attributes and their value respectively. Eg : If you pass attributes = {'data-attr1' : 'val1','data-attr2' : 'val2'}the root tag will have the attributes data-attr1 and data-attr2 with the corresponding values as val1 and val2 respectively
className '' Optional className to be added to the root tag of the component
count null In case you want to show aggregation/count in front of label then pass the number in this option. This is generally useful for showing the items present corresponding to that filter option.
countElem function Return the element that you want to be rendered in place of count.
disabled false To disable or not to disable
iconElement func
iconLabel ['on', 'off'] the text to be shown in the switch button in on and off states.
label '' The text label for that component
mode 'normal' There are two modes here, 'normal' and 'tag'. 'tag' mode can be use for mobile devices where you need experience like this.
name '' name of the component
onChange ({name, value}) function triggered when the component is clicked
type 'switch' The component can be change to have the behaviour of 'switch', 'radio' or 'checkbox'.
value false ️ [Required] true or false

countElem

type: union(func|element)

defaultValue:

function(props) {
  return <span className='toggle-count'>({props.count})</span>;
}

iconElement

type: func

defaultValue:

function(props) {
    return <i></i>
}

<Group/>

Basic Usage

import {Group} from 'react-controls';

 const value = [{
   id: 1,
   label: 'a',
   count: 6
 }, {
   id: 2,
   label: 'b'
 }, {
   id: 3,
   label: 'c'
 }]

export default class X extends React.Component{
 render() {
     return(
        <Group
          name='group'
          type='switch'
          value={value}
        />
        )
       }
}

Props

prop name defaultValue type
attributes {} Sometimes you may need to add some custom attributes to the root tag of the component. attributes will accept an object where the key and values will be those attributes and their value respectively. Eg : If you pass attributes = {'data-attr1' : 'val1','data-attr2' : 'val2'}the root tag will have the attributes data-attr1 and data-attr2 with the corresponding values as val1 and val2 respectively
className '' Optional className to be added to the root tag of the component
mode 'normal' There are two modes here, 'normal' and 'tag'. 'tag' mode can be use for mobile devices where you need experience like this.
onChange ({name, value}) function triggered when the component is clicked.
type 'switch' The component can be change to have the behaviour of 'switch', 'radio' or 'checkbox'.
value {} ️ [Required] An array of the form [{id: 1,label: 'x', value: true, count: 4}, {id:2, label: 'y', value: true, count:7}] .
selectedIds [] or null An array of selected ids for checkbox or switch and a single id for 'radio' type.
id 'id' The key name of the primary key.
disabled false Set to true to disable the whole group.

Development

  1. Clone the repo
  2. Create a new branch.
  3. Run npm install && npm run storybook
  4. You can find the server running at localhost:9002
  5. Add feature or fix bug. Add tests if required.
  6. if commit fails make sure that there's no linting error or failed test by running npm run test && npm run lint

License

MIT @ Ritesh Kumar