react-native-optiongroup

0.0.7 • Public • Published

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

Package Sidebar

Install

npm i react-native-optiongroup

Weekly Downloads

15

Version

0.0.7

License

MIT

Unpacked Size

62.7 kB

Total Files

9

Last publish

Collaborators

  • flyandi