diff --git a/README.md b/README.md index 3bf9260..7ed075b 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,15 @@ # react-native-simple-radio-button + > simple and useful radio button component for React Native [![npm](https://img.shields.io/npm/v/react-native-simple-radio-button.svg)]()[![npm](https://img.shields.io/npm/l/react-native-simple-radio-button.svg)]() [![NPM](https://nodei.co/npm/react-native-simple-radio-button.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-simple-radio-button/) - -Demo ---- +## Demo ![Demo](./doc/ver1.3_demo.gif) - ## Installation in Cli @@ -20,51 +18,55 @@ in Cli npm i react-native-simple-radio-button --save ``` - # Getting started ```js -import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button'; - +import RadioForm, { + RadioButton, + RadioButtonInput, + RadioButtonLabel, +} from "react-native-simple-radio-button"; var radio_props = [ - {label: 'param1', value: 0 }, - {label: 'param2', value: 1 } + { label: "param1", value: 0 }, + { label: "param2", value: 1 }, ]; var RadioButtonProject = React.createClass({ - getInitialState: function() { + getInitialState: function () { return { value: 0, - } + }; }, - render: function() { + render: function () { return ( {this.setState({value:value})}} + onPress={(value) => { + this.setState({ value: value }); + }} /> ); - } + }, }); ``` -Basic ---- +## Basic ```js {this.setState({value:value})}} + onPress={(value) => { + this.setState({ value: value }); + }} /> ``` -Advanced ---- +## Advanced ```js {this.setState({value:value})}} + onPress={(value) => { + this.setState({ value: value }); + }} /> ``` -Pro ---- +## Pro ```js - + {/* To create radio buttons, loop through your array of options */} - { - radio_props.map((obj, i) => ( - - {/* You can set RadioButtonLabel before RadioButtonInput */} - - - - )) - } + {radio_props.map((obj, i) => ( + + {/* You can set RadioButtonLabel before RadioButtonInput */} + + + + ))} ``` # Methods ## updateIsActiveIndex + Updating active radio button forcibly # Props ## RadioForm Component -### radio_props (Default: `[]`) _*required_ + +### radio*props (Default: `[]`) *\*required\_ + radio button value and label array -### onPress _*required_ +### onPress _\*required_ + callback when radio button clicked. ### initial (Default: `0`) + The index of selected radio button. This is used when this component is activated. If you want to pass initial as asynchronous, you can use updateIsActiveIndex function. + > If you want to make it empty initially, please pass `-1` ### buttonColor(Default: '#2196f3') + change radio button color ```js - + ``` ![Demo](./doc/button_color.jpg) ### labelColor(Default: '#000') + change label color ```js - + ``` - ### formHorizontal(Default: false) + change form position ```js - + ``` ![Demo](./doc/form_horizontal.jpg) - ### labelHorizontal(Default: true) + change label position ```js - + ``` ![Demo](./doc/label_horizontal.jpg) ### animation (Default: `true`) + if you pass false, animation of radio button is disabled ![Demo](./doc/demo_1.gif) ### accessible + indicates accessibility for the individual radio button input and radio button label components ### accessibilityLabel + used to set accessibilityLabel for individual radio button input and radio button label components, radio button input will have accessibilityLabel = [accessibilityLabel]Input[index] radio button label will have accessibilityLabel = [accessibilityLabel]Label[index] ### testID + used to set testID for individual radio button input and radio button label components, radio button input will have testID = [testID]Input[index] radio button label will have testID = [testID]Label[index] ## RadioButton Component + ### isSelected + If you pass `true` to this param, that button change to selected status. ### labelHorizontal + change label position to horizontal ### buttonColor -The button color + +The button color when not selected ### selectedButtonColor -The selected button color + +The button color when selected ### labelColor + The label color ### style + The label style ### wrapStyle + Styles that are applied to the wrapping the RadioButton component. -## onPress _*required_ +## onPress _\*required_ + callback when radio button clicked. ### idSeparator (Default: `|`) + separator used for extracting id from accessibilityLabel and testID ### accessible + indicates accessibility for the wrapped radio button input and radio button label components ### accessibilityLabel + used to set accessibilityLabel for the wrapped radio button input and radio button label components, needs to be of the format [accessibilityLabel][separator][id] radio button input will have accessibilityLabel = [accessibilityLabel]Input[index] radio button label will have accessibilityLabel = [accessibilityLabel]Label[index] ### testID + used to set testID for individual radio button input and radio button label components, needs to be of the format [testID][separator][id] radio button input will have testID = [testID]Input[index] radio button label will have testID = [testID]Label[index] @@ -251,66 +258,86 @@ radio button label will have testID = [testID]Label[index] ```js ``` # RadioButtonInput + ### isSelected + ### onPress + ### buttonInnerColor + The button inner color ### buttonOuterColor + The button inner color ### buttonSize + The button size. Width and height will be same length. ### buttonOuterSize + The button size of outer. Width and height will be same length. ### buttonStyle + Custom button style ### buttonWrapStyle + Custom style for view of button's outside ### accessible + indicates accessibility for the radio button input component ### accessibilityLabel + used to set accessibilityLabel (content description / label for Android) for the radio button input component ### testID + used to set testID (id / name for iOS) for the radio button input component # RadioButtonLabel + ### labelHorizontal + If you pass true, the button and label will be aligned horizontally. ### labelStyle + If you pass style, you can change label text style as you want ### labelWrapStyle + If you pass style, you can change label wrapper view style as you want -### onPress _*required_ +### onPress _\*required_ + callback when radio button clicked. ### accessible + indicates accessibility for the radio button label component ### accessibilityLabel + used to set accessibilityLabel (content description / label for Android) for the radio button label component ### testID -used to set testID (id / name for iOS) for the radio button label component +used to set testID (id / name for iOS) for the radio button label component # Contributing + Of course! Welcome :) You can use following command in `example` dir: @@ -321,6 +348,6 @@ npm run sync During running this command, when you change source to implement/fix something, these changes will sync to `example/node_modules/react-native-simple-radio-button/`. You can check your change using example project easily. - # License + MIT