react-native-multiple-select-pro
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

react-native-multiple-select-pro

Select all options, single and multiple selectors. This package will provide you item search facility and delete selected facility.✌️💖

Screenshot a

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.

License

Package Sidebar

Install

npm i react-native-multiple-select-pro

Weekly Downloads

27

Version

1.0.6

License

MIT

Unpacked Size

95.6 kB

Total Files

33

Last publish

Collaborators

  • itsaladin