3.0.6 • Published 2 years ago

react-native-radio-buttons-group-with-test-ids v3.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

React Native Radio Buttons Group

Simple, best and easy to use radio buttons for react native apps.

npm LICENSE MIT

NPM

Getting Started

Just a sneak peek (lots more can be done)

DEMO

Installation

npm i react-native-radio-buttons-group --save

or

yarn add react-native-radio-buttons-group

Usage

Javascript Example
App.js
import React, { useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';

export default function App() {

    const [radioButtons, setRadioButtons] = useState([
        {
            id: '1', // acts as primary key, should be unique and non-empty string
            label: 'Option 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Option 2',
            value: 'option2'
        }
    ]);

    function onPressRadioButton(radioButtonsArray) {
        setRadioButtons(radioButtonsArray);
    }

    return (
        <RadioGroup 
            radioButtons={radioButtons} 
            onPress={onPressRadioButton} 
        />
    );

}
Typescript Example
App.tsx
import React, { useState } from 'react';
import RadioGroup, {RadioButtonProps} from 'react-native-radio-buttons-group';

export default function App() {

    const [radioButtons, setRadioButtons] = useState<RadioButtonProps[]>([
        {
            id: '1', // acts as primary key, should be unique and non-empty string
            label: 'Option 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Option 2',
            value: 'option2'
        }
    ]);

    function onPressRadioButton(radioButtonsArray: RadioButtonProps[]) {
        setRadioButtons(radioButtonsArray);
    }

    return (
        <RadioGroup 
            radioButtons={radioButtons} 
            onPress={onPressRadioButton} 
        />
    );

}

Props

RadioButton

KeyTypeRequiredDefaultValid Values
borderColorstringnocolorcss color formats
borderSizenumber2positive numbers
colorstringno#444css color formats
containerStyleobjectnoreact style
descriptionstringnoany string
descriptionStyleobjectnoreact style
disabledbooleannofalsetrue / false
idstringyesunique string
labelstringnoany string
labelStyleobjectnoreact style
layoutenumnorowrow / column
onPressfunctionnoany function
selectedbooleannofalsetrue / false
sizenumberno24positive numbers
valuestringnoany string

RadioGroup

KeyTypeRequiredDefaultValid Values
containerStyleobjectnoreact style
layoutenumnocolumnrow / column
onPressfunctionnoany function
radioButtonsarrayyesarrary of RadioButton objects
Horizontal (side by side)
<RadioGroup 
    radioButtons={radioButtons} 
    onPress={onPressRadioButton} 
    layout='row'
/>

Contributions

Fork and create a pull request

License

MIT License

Stargazers over time

Stargazers over time

Sponsor