https://github.com/xgfe/react-native-label-select
A react native component used for making multiple choices.
https://github.com/xgfe/react-native-label-select
Last synced: 5 days ago
JSON representation
A react native component used for making multiple choices.
- Host: GitHub
- URL: https://github.com/xgfe/react-native-label-select
- Owner: xgfe
- License: mit
- Created: 2017-01-11T09:51:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-28T06:44:35.000Z (about 5 years ago)
- Last Synced: 2025-05-05T15:10:14.633Z (5 days ago)
- Language: JavaScript
- Size: 1.72 MB
- Stars: 130
- Watchers: 32
- Forks: 21
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-label-select ★81 - A modal selector for React Native with selected items displayed as labels. (Components / UI)
README
## react-native-label-select [](https://travis-ci.org/xgfe/react-native-label-select) [](https://coveralls.io/github/Tinysymphony/react-native-label-select?branch=master)
LabelSelect is a component used for making multiple choices. The modal is a checkbox like html.
## Example
## Usage
```shell
npm install --save react-native-label-select
```
```js
import LabelSelect from 'react-native-label-select';
```
```html
{...}}>
selected ItemA
Item B
```
## Properties
**LabelSelect**
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| style | - | object | Specify styles for the LabelSelect |
| title | - | string | The title text of the modal |
| readOnly | false | bool | is the component readonly |
| enable | true | bool | is the component interactive |
| enableAddBtn | true | bool | whether to show the add button |
| onConfirm | - | function | Triggered when the confirm button of modal is pressed with the newly selected items list passed as the only argument |
| confirmText | - | string | Text of confirm button. |
| cancelText | - | string | Text of cancelText button. |
| customStyle | - | object | You can customize styles of `modal` / `buttonView` / `confirmButton` / `confirmText` / `cancelButton` / `cancelText` by `customStyle. |
**LabelSelect.Label**
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| onCancel | - | function | Triggered when the close button of Label is pressed. |
| data | - | any | Data that bind to the Label |
| customStyle | - | object | You can customize styles of `text` by `customStyle. |
**LabelSelect.ModalItem**
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| data | - | any | Data that bind to the ModalItem. After confirming the items selected on modal, the data will be passed to the selected list. |
## Instance Methods
| Method | Params | Description |
| --- | --- | --- |
| openModal | - | Open select modal |
| cancelSelect | - | Close select modal. Also triggered when the cancel button of modal being pressed. |
| customStyle | - | object | You can customize styles of `modalText` / `outerCircle` / `innerCircle` by `customStyle. |
Use `ref` property as a hook to invoke internal methods.
```html
...
```
```js
this.ref.select.openModal()
this.ref.select.cancelSelect()
```