react-native-multiple-select-pro
v1.0.6
Published
select single, all options
Downloads
39
Maintainers
Readme
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:
yarn add react-native-multiple-select-pro
npm install react-native-multiple-select-pro
Usage
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { MultiSelector } from 'react-native-multiple-select-pro';
export default function App() {
const [data, setData] = React.useState([]);
const DATASET = [
{
id: 1,
title: 'sunt aut facere ',
},
{
id: 2,
title: 'qui est esse',
},
{
id: 3,
title: 'ea molestias quasi',
},
{
id: 4,
title: 'eum et est occaecati',
},
{
id: 5,
title: 'nesciunt quas odio',
},
{
id: 6,
title: 'dolorem eum magni',
},
{
id: 7,
title: 'magnam facilis autem',
},
{
id: 8,
title: 'dolorem dolore est ipsam',
},
{
id: 9,
title: 'nesciunt iure omnis',
},
{
id: 10,
title: 'optio molestias',
},
];
return (
<View style={{ maxHeight: '50%' }}>
<MultiSelector
title="User Name"
dataSet={DATASET}
containerHeight="75%"
txtColor={'white'}
bgColor={'#00bbda'}
buttonTxtColor={'white'}
buttonBGColor={'#00bbda'}
checkboxColor={'white'}
buttonName="Done!"
setData={setData}
hideButtonBGColor={'#00bbda'}
hideButtonTxtColor={'white'}
inputBoxHeight={35}
/>
{/* you could get all selected data in data state */}
{console.log(data)}
</View>
);
}
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.
<View style={{ maxHeight: '50%' }}>
<MultiSelector >
</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.