diff --git a/README.md b/README.md index c620d1c..7292b28 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,90 @@ +# react-native-select-two -## react-native-select-two ## Component like [Select2](https://select2.org/) on web for React Native +![Single select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-single-select.gif) ## Add it to your project 1. Insall package - - Using NPM - `npm install react-native-select-two` - - Using Yarn - `yarn add react-native-select-two` -2. Import package - `import Select2 from 'react-native-select-two';` + - Using NPM + `npm install react-native-select-two` + - or: + - Using Yarn + `yarn add react-native-select-two` +2. Install React Native Modal dependence + +- Using NPM + `npm install react-native-modal` +- or + -Using Yarn + `yarn add react-native-modal` + +3. Import package + `import Select2 from 'react-native-select-two';` ## Usage - - ```javascript -import React, { Component } from 'react'; -import { View, Text, StyleSheet } from 'react-native'; -import Select2 from 'react-native-select-two'; +import React, { Component } from "react" +import { View, Text, StyleSheet } from "react-native" +import Select2 from "react-native-select-two" const mockData = [ - { id: 1, name: 'React Native Developer', checked: true }, // set default checked for render option item - { id: 2, name: 'Android Developer' }, - { id: 3, name: 'iOS Developer' } -]; + { id: 1, name: "React Native Developer", checked: true }, // set default checked for render option item + { id: 2, name: "Android Developer" }, + { id: 3, name: "iOS Developer" } +] // create a component class CreateNewAppointment extends Component { - render() { - return ( - - { - this.setState({ data }); - }} - onRemoveItem={data => { - this.setState({ data }); - }} - /> - - ); - } + render() { + return ( + + { + this.setState({ data }) + }} + onRemoveItem={data => { + this.setState({ data }) + }} + /> + + ) + } } ``` -## Usage - -### Single select -![Single select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-single-select.gif) ### Multiple select -![Multiple select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-multipe-select.gif) - +![Multiple select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-multipe-select.gif) -## Props - -- **`style`** _(Object)_ - Custom style for component -- **`title`** _(String)_ String display when you don't select any item -- **`data`** _(Array)_ - Datasource of list options: an array of objects (each object have ```name``` property) -- **`onSelect`** _(Function)_ - The callback function trigger after you press select button -- **`onRemoveItem`** _(Function)_ - The callback function trigger after you press tags to remove them -- **`popupTitle`** _(String)_ - Title of modal select item -- **`colorTheme`** _(String)_ - Color theme -- **`isSelectSingle`** _(Bool)_ - Set ```false``` if you want select multiple -- **`showSearchBox`** _(Bool)_ - Set ```false``` if you want hide search box, default value is ```true``` -- **`cancelButtonText`** _(String)_ - Cancel button text title -- **`selectButtonText`** _(String)_ - Select button text title -- **`defaultFontName`** _(String)_ - Set custom font for all components -- **`selectedTitlteStyle`** _(Object)_ - Set custom style for display selected title text -- **`buttonTextStyle`** _(Object)_ - Set custom button text style -- **`buttonStyle`** _(Object)_ - Set custom button style +## Properties + +| Property name | Type | Default | Description | +| ------------------------- | -------------- | ------------------------------- | ------------------------------------------------------------------------------------------- | +| **style** | _Object_ | none | Custom style for component | +| **title** | _String_ | none | String display when you don't select any item | +| **data** | _Array_ | \*required | Datasource of list options: an array of objects (each object have `name` and `id` property) | +| **onSelect** | _Function_ | none | The callback function trigger after you press select button | +| **onRemoveItem** | _Function_ | none | The callback function trigger after you press tags to remove them | +| **popupTitle** | _String_ | none | Title of modal select item | +| **colorTheme** | _string/color_ | #16a45f | Color for componet | +| **isSelectSingle** | _Bool_ | false | Selelect only one option | +| **showSearchBox** | _Bool_ | true | Show or hide search field | +| **cancelButtonText** | _string_ | Hủy | Cancel button text title | +| **selectButtonText** | _String_ | Chọn | Select button text title | +| **searchPlaceHolderText** | _String_ | Nhập vào từ khóa | Placeholder text for search field | +| **listEmptyTitle** | _String_ | Không tìm thấy lựa chọn phù hợp | Title to show when there's no item to be render | +| **defaultFontName** | _String_ | none | Set custom font for all component | +| **selectedTitlteStyle** | _Object_ | none | Set custom style for display selected title text | +| **buttonTextStyle** | _Object_ | none | Set custom button text style | +| **buttonStyle** | _Object_ | none | Set custom button style | **MIT Licensed**