react-native-controls

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

Installation

npm install --save react-native-controls

This package consists of 2 components:

• Toggle
• Group

<Toggle/>

Basic Usage

import {Toggle} from 'react-native-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 -------|------|------ 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. disabled| false |To disable or not to disable 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

<Group/>

Basic Usage

import {Group} from 'react-native-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 -------|------|------ 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:7007
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