react-controls

A set of components like checkboxes, switches and radio buttons used at Housing.com

Normal	Tag

<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