• Stars
    star
    131
  • Rank 275,867 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A react native component used for making multiple choices.

react-native-label-select Build Status Coverage Status

LabelSelect is a component used for making multiple choices. The modal is a checkbox like html.

Example

Usage

npm install --save react-native-label-select
import LabelSelect from 'react-native-label-select';
<LabelSelect
  ref="labelSelect"
  title="Make Choices"
  enable={true}
  readOnly={false}
  enableAddBtn={true}
  style={yourStyle}
  onConfirm={(list) => {...}}>

  <LabelSelect.Label
    key={...}
    data={itemA}
    onCancel={func}>selected ItemA</LabelSelect.Label>
  <LabelSelect.ModalItem
    key={...}
    data={itemB}>Item B</LabelSelect.ModalItem>
</LabelSelect>

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

Use ref property as a hook to invoke internal methods.

<LabelSelect ref="select">...</LabelSelect>
this.ref.select.openModal()
this.ref.select.cancelSelect()

More Repositories

1

react-native-datepicker

react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
JavaScript
2,122
star
2

react-native-ui-xg

react-native-ui-xg
JavaScript
152
star
3

react-native-simple-toast

Simple Toast for React-Native.
Objective-C
129
star
4

react-native-picker-xg

react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]
JavaScript
78
star
5

react-native-grading

A React Native grading component using ReactART.
JavaScript
58
star
6

xgfe.github.io

xgfe blog
CSS
27
star
7

Basics

Frontend Basic Knowledge
HTML
16
star
8

xCharts

charts based on D3.js
JavaScript
15
star
9

react-native-native-env

Providing environment variables from native to js in React Native.
Java
14
star
10

ui-xg

AngularJS directives for xgfe team.
JavaScript
13
star
11

react-native-stylesheet-xg

extension stylesheet for cross platforms and responsive
Objective-C
9
star
12

react-native-buttons

react native button based on pure JavaScript with good expansibility.
JavaScript
9
star
13

codeguide

Xgfe Front-end development coding standards
8
star
14

lint-plus

xg-htmlhint+csslint+eslint
JavaScript
8
star
15

xg

Front-end Integrated Solution for xgfe based on Fis3
JavaScript
7
star
16

xg-csshint

postcss-plugin csshint xgfe
JavaScript
4
star
17

freepack

A file version free pack manager.
JavaScript
3
star
18

fis3-hook-amd_enhancejs

amd模块增强fis3实现
JavaScript
2
star
19

xg-command-lint

xg lint pulgin, using 'lint-plus'
JavaScript
2
star
20

xg-command-loon

JavaScript
1
star
21

xg-command-fes

JavaScript
1
star