https://github.com/itsaladin/react-native-multiple-select-pro
Select all options, single and multiple selectors. This package will provide an item search facility and delete selected items.
https://github.com/itsaladin/react-native-multiple-select-pro
react-native react-native-multi-select-pro
Last synced: 3 months ago
JSON representation
Select all options, single and multiple selectors. This package will provide an item search facility and delete selected items.
- Host: GitHub
- URL: https://github.com/itsaladin/react-native-multiple-select-pro
- Owner: itsaladin
- License: mit
- Created: 2023-11-09T11:14:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-14T05:10:28.000Z (over 2 years ago)
- Last Synced: 2024-03-14T17:34:21.042Z (over 2 years ago)
- Topics: react-native, react-native-multi-select-pro
- Language: TypeScript
- Homepage:
- Size: 3.74 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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:
```sh
yarn add react-native-multiple-select-pro
```
```sh
npm install react-native-multiple-select-pro
```
## Usage
```js
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 (
{/* you could get all selected data in data state */}
{console.log(data)}
);
}
```
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.
```js
```
## 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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License