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