A simple cross-compatible option group element
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
.gitignore
README.md
package.json

README.md

react-native-optiongroup

A simple option group control.

alt text

Installation

React Native >= 0.49

yarn add react-native-optiongroup

Attributes

Prop Description Default
string backgroundColor Specifies the background color of the component transparent
string borderColor Specifies the border color of the component #828186
number borderWidth Specifies the border width of the component 1
number borderRadius Specifies the border radius of the component 3
number contentPadding The text padding between the boxes 10
string inverseTextColor The text color used when a option is selected #ffffff
array/object options An array or object with the values required
any selected The current selected item undefined
any defaultValue Same as selected undefined
object style A standard style object, refer below for more information undefined
string useLabelValue A string indicating which key should be used for the label in an array object. undefined
string useKeyValue A string indicating which key should be used for the key in an array object. undefined
string theme One of the following theme strings: red, yellow, blue or green undefined
bool invertKeyLabel If true the label becomes the key and the key becomes the label false
string fontFamily The font family undefined
string fontSize The font size undefined

Events

Prop Description
onChange Executed when another option value was selected

Examples

Import the component:

import OptionGroup from 'react-native-optiongroup';

Array Options

<OptionGroup
    options={['Yes', 'No', 'Maybe']}
    onChange={(value) => console.log(value, 'selected')}
/>

Object Options

<OptionGroup
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

Complex Object Options

<OptionGroup
    options={[
    	{
    		'answerResult': 0,
    		'label': 'Yes'
    	},
    	{
    		'answerResult': 1,
    		'label': 'No'
    	},
    	{
    		'answerResult': 2,
    		'label': 'Maybe'
    	},
    ]}
    useLabelValue={'label'}
    useKeyValue={'answerResult'}
    onChange={(value) => console.log(value, 'selected')}
/>

Inverted Options

<OptionGroup
    options={{yes: 'Yes, no: 'No', maybe: 'Maybe'}}
    onChange={(value) => console.log(value, 'selected')}
    invertKeyLabel={true}
/>

Attribute Styles

alt text

<OptionGroup
	borderColor={'green'}
	borderWidth={2}
	borderRadius={5}
	backgroundColor={'white'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

Standard Styles

alt text

<OptionGroup
	style={{fontSize: 20, margin: 20}}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

A subset of standard styles are supported including margin, fontSize, fontFamily, backgroundColor, borderColor, borderWidth, borderRadius, contentPadding and inverseTextColor.

Theme Styles

alt text

<OptionGroup
	defaultValue={0}
	theme={'red'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

<OptionGroup
	defaultValue={0}
	theme={'blue'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

<OptionGroup
	defaultValue={0}
	theme={'green'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

<OptionGroup
	defaultValue={0}
	theme={'yellow'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

Default Theme Id's are light, dark, grey, red, yellow, blue and green