1.1.0 • Published 4 years ago

react-bootstrap-multselect v1.1.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

Multiple Select

Features

  • Provide multiple select dropdown for any array of data
  • Sorting on demand ascending/descending
  • Filter by key press and you are able to active and inactive filter
  • Customise the placeholder name

Installation via NPM

npm install react-bootstrap-multselect

import MultipleSelect from 'react-bootstrap-multselect'

Dependency Please add react-bootstrap as a dependency on your project

Usage

import { MultipleSelect } from 'react-bootstrap-multselect';

<MultipleSelect dataSet = {...} />

Props

  • dataSet: object
  • onSelect : function

Optional Props

  • sortDirection: boolean
  • showFilter: boolean
  • className: String
  • style: css style

dataSet Object Key

Set the data key that map to Multiple Select

{
selectItems: object,
dataKey : {           /* Object key set based upon selectItems Key*/
    id: String,
    label: String
  },
  placeholder: String ,
  selectAllLabel: String,  /* Optional*/
  filterPlaceholder: String,  /* Optional*/
  dataNotFound: String,   /* Optional */
  toggleStyle:{},    /*optional or use only style props */
  toggleClass:"" /*optional or pass the class Name */
  }

##Example:

import React, {useState } from 'react';
import MultipleSelect from './react-bootstrap-multselect''
import 'bootstrap/dist/css/bootstrap.min.css';

const arrayData = [
  { name: 'Select-1', key: 'select1', game: 'Badminton' },
  { name: 'Select-2', key: 'select2', game: 'Football', },
  { name: 'Select-3', key: 'select3', game: 'Tennis', },
  { name: 'Select-4', key: 'select4', game: 'Golf', },
  { name: 'Select-4', key: 'select5',game: 'Handball', },
  { name: 'Select-4',  key: 'select6', game: 'Cricket', },
  { name: 'Select-4', key: 'select7', game: 'Chess', },
  { name: 'Select-4', key: 'select8', game: 'PubG', },
  { name: 'Select-4', key: 'select9',game: 'Game Of Thorns', }];

// return the selected items 
const getSelectedItems = (e) => {
  console.log(e)
}

// object of Multiple Select
const multipleSelectItems ={
  selectItems: arrayData,
  dataKey:{
    id: "key",
    label:'game'
  },
  placeholder:"Select Games" ,
  selectAllLabel:"Select all",
  filterPlaceholder:"",
  className:"",
  dataNotFound:"Not Found",
}

function App() {
  return (
    <div className="container">
        <MultipleSelect dataSet={multipleSelectItems} 
        onSelect={getSelectedItems} 
        sortDirection
        showFilter
        className=""
         />
    </div>
  );
}

export default App;

npm.io

##Keywords