react-native-multiple-select-pro

Select all options, single and multiple selectors. This package will provide you item search facility and delete selected facility.:v::sparkling_heart:

Installation

Using Yarn:

1yarn add react-native-multiple-select-pro

1npm install react-native-multiple-select-pro

Usage

1import * as React from 'react';
2import { StyleSheet, View } from 'react-native';
3import { MultiSelector } from 'react-native-multiple-select-pro';
4
5export default function App() {
6  const [data, setData] = React.useState([]);
7
8  const DATASET = [
9    {
10      id: 1,
11      title: 'sunt aut facere ',
12    },
13    {
14      id: 2,
15      title: 'qui est esse',
16    },
17    {
18      id: 3,
19      title: 'ea molestias quasi',
20    },
21    {
22      id: 4,
23      title: 'eum et est occaecati',
24    },
25    {
26      id: 5,
27      title: 'nesciunt quas odio',
28    },
29    {
30      id: 6,
31      title: 'dolorem eum magni',
32    },
33    {
34      id: 7,
35      title: 'magnam facilis autem',
36    },
37    {
38      id: 8,
39      title: 'dolorem dolore est ipsam',
40    },
41    {
42      id: 9,
43      title: 'nesciunt iure omnis',
44    },
45    {
46      id: 10,
47      title: 'optio molestias',
48    },
49  ];
50
51  return (
52    <View style={{ maxHeight: '50%' }}>
53      <MultiSelector
54        title="User Name"
55        dataSet={DATASET}
56        containerHeight="75%"
57        txtColor={'white'}
58        bgColor={'#00bbda'}
59        buttonTxtColor={'white'}
60        buttonBGColor={'#00bbda'}
61        checkboxColor={'white'}
62        buttonName="Done!"
63        setData={setData}
64        hideButtonBGColor={'#00bbda'}
65        hideButtonTxtColor={'white'}
66        inputBoxHeight={35}
67      />
68      {/* you could get all selected data in data state */}
69      {console.log(data)}
70    </View>
71  );
72}

If your DATASET is too large you must wrap MultiSelector by View with maxHeight="50%". You could manage total height with MaxHeight and containerHeight props.

1<View style={{ maxHeight: '50%' }}>
2  <MultiSelector >
3</View>

Properties

Prop	Type	Description	Default
dataSet	Array[]	dataSet you must input array data .	required
title	String	Label or title	Search here
data	Array	you will get selected result in date prop	not-required
setData	Array[]	Pass setState data in setData props	required callback
buttonName	String	Name of button	Done
checkboxColor	String	Color of checkbox	#00bbda
txtColor	String	color of text of body element	white
buttonTxtColor	String	Text color of button	white
buttonBGColor	String	Background color of button	#00bbda
height	String	accepted percentage of table height	"60%"
bgColor	String	Background color of body element	#00bbda
hideButtonBGColor	String	Hide button background color	#00bbda
hideButtonTxtColor	String	hide Button text Color	#white
inputBoxHeight	number	Height of InputBox	35
containerHeight	string	Height of container accepte only percentage	60%

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License