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
+
## 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
-
### Multiple select
-
-
+
-## 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**