react-multi-select-advanced
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

react-multi-select-advanced

Open Source Top Language MIT License Issues Minified Size Downloads Storybook

Description

The React Multi-select Advanced component is a powerful tool that can handle massive data sets without any struggle. It comes with various customizable features that make it very easy to use, so you can tailor it to your specific needs. Now it supports server side search.

Like Beyoncé once said, If you liked it, then you should a put a on it. ➽ Stars

Features

  • Typescript: Types included, ensuring compatibility with your project.
  • Zero dependency: No need to worry about other libraries.
  • Powerful: Handles massive data sets without problem.
  • Responsive: Ensures that the component fit all device resolutions depending on parent component.
  • Customizable: Allow you to add custom class and change button, icons as components.
  • Auto direction: Ensures that list items open in the correct direction based on their placement on the page.
  • Localization: Easy to integrate any language.
  • Keyboard navigation: Supports keyboard arrows and tab.
  • Highlight keywords: Highlights entered text on list results.
  • Match priority: If label starts with keyword, shows first.
  • Server side search: Supports server side search.
  • Storybook : Document and test playground.

Getting Started

1. Installation

npm
npm install react-multi-select-advanced
yarn
yarn add react-multi-select-advanced

2. Basic Usage

import { useState } from 'react'

// Import component / and types if need it.
import MultiSelectAdvanced, { MultiSelectAdvancedOption } from 'react-multi-select-advanced'

// Mock data
const options = [
 { label: 'Istanbul', value: 'Istanbul' },
 { label: 'Paris', value: 'Paris' },
 { label: 'London', value: 'London' },
 { label: 'Buenos Aires', value: 'Buenos Aires' },
 { label: 'Canberra', value: 'Canberra' },
 { label: 'Havana', value: 'Havana' },
 { label: 'Helsinki', value: 'Helsinki', disabled: true },
 { label: 'Tokyo', value: 'Tokyo' },
 { label: 'Amsterdam', value: 'Amsterdam' },
 { label: 'Moscow', value: 'Moscow' },
 { label: 'Stockholm', value: 'Stockholm', disabled: true },
 { label: 'Singapore', value: 'Singapore' },
 { label: 'Lisbon', value: 'Lisbon' },
 { label: 'Oslo', value: 'Oslo' },
 { label: 'Reykjavík', value: 'Reykjavík' }
]

// Mock pre selected data
const selectedValues = [
 { label: 'London', value: 'London' },
 { label: 'Tokyo', value: 'Tokyo' }
]

// App
function App() {

 // Pre-select or not
 const [selectedItems, setSelectedItems] = useState(selectedValues as MultiSelectAdvancedOption[])

 // Onchange handler
 const handleChange = (items: MultiSelectAdvancedOption[]) => setSelectedItems(items)

 return (
  <div className="App">

   <MultiSelectAdvanced options={options} selectedValues={selectedItems} onChange={handleChange} />

  </div>
 )
}

export default App

3. Server side search

import { useState } from 'react'

// Import component / and types if need it.
import MultiSelectAdvanced, { MultiSelectAdvancedOption } from 'react-multi-select-advanced'

// Mock data
const options = [
 { label: 'Istanbul', value: 'Istanbul' },
 { label: 'Paris', value: 'Paris' },
 { label: 'London', value: 'London' },
 { label: 'Buenos Aires', value: 'Buenos Aires' },
 { label: 'Canberra', value: 'Canberra' },
 { label: 'Havana', value: 'Havana' },
 { label: 'Helsinki', value: 'Helsinki', disabled: true },
 { label: 'Tokyo', value: 'Tokyo' },
 { label: 'Amsterdam', value: 'Amsterdam' },
 { label: 'Moscow', value: 'Moscow' },
 { label: 'Stockholm', value: 'Stockholm', disabled: true },
 { label: 'Singapore', value: 'Singapore' },
 { label: 'Lisbon', value: 'Lisbon' },
 { label: 'Oslo', value: 'Oslo' },
 { label: 'Reykjavík', value: 'Reykjavík' }
]

// App
function App() {

 // Pre-select or not
 const [selectedItems, setSelectedItems] = useState([] as MultiSelectAdvancedOption[])

 // Onchange handler
 const handleChange = (items: MultiSelectAdvancedOption[]) => setSelectedItems(items)

// Server side search function
const searchOnServer = async (keyword:string) => {
	try {
		// Before return the data make sure structure is matching with array of MultiSelectAdvancedOption
		return await search(keyword)
	} catch (error){
		return error
	}
}

// Mock server response
const search = async (keyword:string) => {
	return new Promise(resolve => {
		const filteredData = options.cities.filter(city => city.label.toLowerCase().includes(keyword.toLowerCase()))
		return setTimeout(() => resolve(filteredData), 500)
	})
}

 return (
  <div className="App">

   <MultiSelectAdvanced isServerSide={true} selectedValues={selectedItems} onChange={handleChange} onKeywordChange={keyword => searchOnServer(keyword)} />

  </div>
 )
}

export default App

4. Props

Prop Type Default Description
className string Options data.
options array [] Options data.
selectedValues array [] Pre-selected options.
Input
name string auto input name.
id string auto input id.
label string Add label to top of input.
disabled boolean Disables input and all actions.
invalid boolean If true border color turns to red.
inputDelay number 1000 Input delay (ms).
placeholder string Input placeholder.
Filter
filterShowLoading boolean true Show/hide loading indicator or component.
filterLimit number Maximum dropdown display limit.
filterHighlightKeyword boolean false Highlights matching keyword. Suggested to use with filterLimit because of performance.
filterOrderByMatchRank boolean false Gives match score if label starts with search keyword. Suggested to use with filterLimit because of performance.
Selected Items
selectionLimit number Limits selected items.
hideInputOnSelectionLimit boolean false Hides input when selection limit reached
selectionMaxVisibleItems number Limits selected display items and adds 'x more..' or MoreItemsComponent after items.
selectionLabelMaxWidth number 100 Limits max width (px) of display label and wrap with ellipsis.
selectionShowClear boolean false Shows clear all button after selected items if selected count more than 2.
selectionShowDeleteButton boolean true Shows remove button inside the selected items.
Language
languageOverwrite object Please see 4. Localization.
Custom components
LoadingComponent JSX.Element Custom loading indicator.
ClearButtonComponent JSX.Element Custom clear all button.
DeleteButtonComponent JSX.Element Custom delete button.
MoreItemsComponent JSX.Element Custom more items.
Callback Type
isServerSide boolean false Enables server side search.
Callback
onChange function Callback function will invoked on selected options are changed.
onKeywordChange function Callback function to pass keyword and accept data on return.

5. Localization

Easy to localize component by passing object to prop languageOverwrite. Default values are as below.

{
 selectionLimitReached : 'Max selection limit reached.',
 selectionShowClearTitle: 'Clear All',
 selectionDeleteTitle: 'Remove',
 moreItemsText: '{{count}} more items...'
}

6. License

MIT Licensed. Copyright © Lifetoweb 2022.


Happy coding 😊

Package Sidebar

Install

npm i react-multi-select-advanced

Weekly Downloads

31

Version

1.2.3

License

MIT

Unpacked Size

31.1 kB

Total Files

6

Last publish

Collaborators

  • senerdude