0.1.2 • Published 7 years ago
react-native-controls v0.1.2
react-native-controls
A set of components like checkboxes, switches and radio buttons.
Installation
npm install --save react-native-controlsThis package consists of 2 components:
<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
- Clone the repo
- Create a new branch.
- Run
npm install && npm run storybook - You can find the server running at localhost:7007
- Add feature or fix bug. Add tests if required.
- 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