0.1.0 • Published 8 years ago
react-native-checkbox-plus v0.1.0
react-native-checkbox-plus
Simple customizable react-native checkbox Edit
Getting Started
Installation
npm i react-native-checkbox-plus --saveBasic Usage
import React, { Component } from 'react'
import { AppRegistry, View } from 'react-native'
import Checkbox from 'react-native-checkbox-plus'
class Example extends Component {
...
constructor(props) {
super(props)
this.state = {
isChecked: false,
isChecked_ShortHand: false
}
}
...
render() {
return (
<View style={{flex: 1}}>
/* Normal Case */
<View style={{flexWrap: 'wrap', flexDirection: 'row'}}>
<Checkbox
isChecked={this.state.isChecked}
action={() => this.setState({ isChecked: !this.state.isChecked }) }
/>
<View style={{justifyContent:'center'}}>
<Text>Check It now!</Text>
</View>
</View>
/* ShortHand Case */
<Checkbox
useRipple={false}
isAccessContext
rightContext={<Text>What !?</Text>}
isChecked={this.state.isChecked_ShortHand}
action={() => this.setState({ isChecked_ShortHand: !this.state.isChecked_ShortHand })}
/>
</View>
)}
}
AppRegistry.registerComponent('Example', () => Example)Properties
| Props | Type | Default | Description |
|---|---|---|---|
| isChecked | bool(Required) | false | checkbox status |
| action | func(Required) | () => { } | use action while press |
| useRipple | bool(Required) | true | use effect while press |
| size | number(Required) | false | size of ripple |
| checkedCustomIcon | string | - | use custom icon on checked status |
| unCheckedCustomIcon | string | - | use custom icon on unchecked status |
| isAccessContext | bool | false | access to use rightContext |
| rightContext | element | null | use custom in right context |
License
react-native-checkbox-plus is released under the MIT license.
0.1.0
8 years ago