react-native-chips

2.4.0 • Public • Published

React Native Chips

A React Native component which is used to represent array of text. Inspired from material design chips

Getting Started

npm i react-native-chips --save

Usage

import ReactChipsInput from 'react-native-chips';

< ReactChipsInput 
    label="Enter Fruits" initialChips={["Apple", "Orange"]} 
    onChangeChips={(chips) => console.log(chips)} 
    alertRequired={true} 
    chipStyle={{ borderColor: 'blue', backgroundColor: 'grey' }} 
    inputStyle={{fontSize: 22}} 
    labelStyle={{ color: 'blue'}} 
    labelOnBlur={{ color: '#666' }} />

Properties

name description type default
label Placeholder for the Text input String 'Enter your text'
initialChips Initial Chips to be present Array -
onChangeChips To get the value of chips in array Function -
alertRequired To trigger alert on adding and removing chips Boolean false
chipStyle Changing the style of chip elements Style Object -
inputStyle Changing the style of input Text box Style Object -
labelStyle Changing the style of label inside the text box Style Object -
labelOnBlur Changing the style of label when focused Style Object -

Sample

demo demo_with_alert

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

react-native-chips is MIT License @ Ramprasath R

/react-native-chips/

    Package Sidebar

    Install

    npm i react-native-chips

    Weekly Downloads

    30

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    910 kB

    Total Files

    10

    Last publish

    Collaborators

    • ramprasath25