react-native-modest-checkbox

A modest checkbox component for React Native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-modest-checkbox
5423.3.05 years ago7 years agoMinified + gzip package size for react-native-modest-checkbox in KB

Readme

banner

A modest checkbox component for React Native

<a href="https://npmjs.org/package/react-native-modest-checkbox">
  <img src="https://img.shields.io/npm/v/react-native-modest-checkbox.svg?style=flat-square" alt="NPM version" />
</a>
<a href="https://npmjs.org/package/react-native-modest-checkbox">
<img src="https://img.shields.io/npm/dm/react-native-modest-checkbox.svg?style=flat-square" alt="Downloads" />
</a>
<a href="https://github.com/feross/standard">
  <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square" alt="Standard" />
</a>
<a href="https://travis-ci.org/tiaanduplessis/react-native-modest-checkbox">
  <img src="https://img.shields.io/travis/tiaanduplessis/react-native-modest-checkbox/master.svg?style=flat-square" alt="Travis Build" />
</a>
<a href="https://github.com/RichardLitt/standard-readme)">
  <img src="https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square" alt="Standard Readme" />
</a>
<a href="https://badge.fury.io/gh/tiaanduplessis%2Freact-native-modest-checkbox">
  <img src="https://badge.fury.io/gh/tiaanduplessis%2Freact-native-modest-checkbox.svg?style=flat-square" alt="GitHub version" />
   </a>

Table of Contents

Table of Contents
  • About
  • Install
  • Usage
  • Props
  • Contribute
  • License
  • About

    A customizable checkbox component for React Native that supports setting a custom image or component as the checkbox. Inspired by react-native-checkbox.

    Install

    $ npm install --save react-native-modest-checkbox

    $ yarn add react-native-modest-checkbox

    Usage

    demo

    // ... Imagine imports here
    import Checkbox from 'react-native-modest-checkbox'
    
    export default class App extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Checkbox
              label='Text for checkbox'
              onChange={(checked) => console.log('Checked!')}
            />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
    // Imagine some amazing styles right here..
    })
    
    AppRegistry.registerComponent('App', () => App);

    You can use your own images for the checkbox states:
    <CheckBox checkedImage={require('./path/to/image.png')} uncheckedImage={require('./path/to/otherImage.png')} />

    It can also be used with your own components for the checkbox states:
    // Using react-native-vector-icons
    
    <CheckBox
      checkedComponent={<Icon name="hand-peace-o" size={25} color="#222" />}
      uncheckedComponent={<Icon name="hand-paper-o" size={25} color="#222" />}
      label='Custom Component'
      onChange={(checked) => console.log('Checked!')}
    />

    Props

    <th>Property</th>
    <th>Description</th>
    <th>Default Value</th>
    <td><code>checkedComponent</code></td>
    <td>Custom component representing the checked state</td>
    <td><code><Text>Checked</Text></code></td>
    <td><code>uncheckedComponent</code></td>
    <td>Custom component representing the unchecked state</td>
    <td><code><Text>Unchecked</Text></code></td>
    <td><code>checked</code></td>
    <td>Checked value of checkbox</td>
    <td><code>false</code></td>
    <td><code>checkboxStyle</code></td>
    <td>Styles applied to the checkbox</td>
    <td><code>{ width: 30, height: 30 }</code></td>
    <td><code>label</code></td>
    <td>Text that will be displayed next to the checkbox</td>
    <td><code>'Label'</code></td>
    <td><code>customLabel</code></td>
    <td>Customize label using React Component</td>
    <td><code>null</code></td>
    <td><code>labelBefore</code></td>
    <td>Flag if label should be before the checkbox</td>
    <td><code>false</code></td>
    <td><code>labelStyle</code></td>
    <td>Styles applied to the label</td>
    <td><code>{fontSize: 16, color: '#222'}</code></td>
    <td><code>numberOfLabelLines</code></td>
    <td>The number of lines over which the label will be displayed</td>
    <td><code>1</code></td>
    <td><code>containerStyle</code></td>
    <td>Styles applied to the container of label & checkbox</td>
    <td><code>{ flexDirection: 'row', alignItems: 'center'}</code></td>
    <td><code>checkedImage</code></td>
    <td>Image representing checked state (e.g. <code>require('./path/to/image.png')</code>)</td>
    <td><code>checked.png</code></td>
    <td><code>uncheckedImage</code></td>
    <td>Image representing unchecked state (e.g. <code>require('./path/to/image.png')</code>)</td>
    <td><code>unchecked.png</code></td>
    <td><code>onChange</code></td>
    <td>Callback that will be invoked when the checked state has changed. receives a object with <code>name</code> & <code>checked</code> properties as arguments</td>
    <td><code>none</code></td>
    <tr>
    <td><code>noFeedback</code></td>
    <td>Use <code>TouchableWithoutFeedback</code> as container of checkbox</td>
    <td><code>false</code></td>

    Contribute

    Contributions are welcome. Please open up an issue or create PR if you would like to help out.
    Note: If editing the README, please conform to the standard-readme specification.

    License

    Licensed under the MIT License.
    Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.