d4-multiselect-react-dropdown

v1.0.1

React multiselect dropdown component with search and various features For more information about how to use this package see README

Latest version published 1 year ago

License: MIT

NPM

GitHub

Package Health Score

52 / 100

security
No known security issues
popularity
Limited
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
1.0.1	\|	07/2023	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (0)

GitHub Stars: 199
Forks: 114
Contributors: 20

Direct Usage Popularity

The npm package d4-multiselect-react-dropdown receives a total of 0 downloads a week. As such, we scored d4-multiselect-react-dropdown popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package d4-multiselect-react-dropdown, we found that it has been starred 199 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the d4-multiselect-react-dropdown repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like d4-multiselect-react-dropdown is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 80
Open PR: 10
Last Release: 1 year ago
Last Commit: 2 years ago

Further analysis of the maintenance status of d4-multiselect-react-dropdown based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for d4-multiselect-react-dropdown is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 1 year
Dependencies: 0 Direct
Versions: 3
Install Size: 239 kB
Dist-tags: 1
# of Files: 13
Maintainers: 1
TS Typings: No

d4-multiselect-react-dropdown has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

REACT MULTISELECT DROPDOWN

Version Downloads License

💥💥💥 React Library for Component Lazyloading. Tiny and Efficient. Check it Out 💥💥💥

Description

A React component which provides multi select functionality with various features like selection limit, CSS customization, checkbox, search option, disable preselected values, flat array, keyboard navigation for accessibility and grouping features. Also it has feature to behave like normal dropdown(means single select dropdown).

Multiselect

🎉🎉 New features in >=2.0.0

✨ SSR Support
🍃 Light weight
🚀 Typescript

🏳️‍🌈 Getting Started

1. Installation 🔧

npm install multiselect-react-dropdown  

yarn add multiselect-react-dropdown

2. Demo 👁️

React-multi-select-dropdown

3. Basic Usage 📑

import Multiselect from 'multiselect-react-dropdown';

this.state = {
    options: [{name: 'Option 1️⃣', id: 1},{name: 'Option 2️⃣', id: 2}]
};



onSelect(selectedList, selectedItem) {
    ...
}

onRemove(selectedList, removedItem) {
    ...
}

4. Props 💬

Prop	Type	Default	Description
`options`	`array`	`[]`	Dropdown options
`onSelect`	`function`	`func`	Callback function will invoked on select event. Params are selectedList & selectedItem
`onRemove`	`function`	`func`	Callback function will invoked on remove event. Params are selectedList & removedItem
`singleSelect`	`boolean`	`false`	Make it `true` to behave like a normal dropdown(single select dropdown)
`selectedValues`	`array`	`[]`	Preselected value to persist in dropdown
`showCheckbox`	`bool`	`false`	To display checkbox option in the dropdown
`selectionLimit`	`number`	`-1`	You can limit the number of items that can be selected in a dropdown
`placeholder`	`string`	`Select`	Placeholder text
`disablePreSelectedValues`	`bool`	`false`	Prevent to deselect the preselected values
`isObject`	`bool`	`true`	Make it false to display flat array of string or number `Ex. ['Test1',1]`
`displayValue`	`string`	`value`	Property name in the object to display in the dropdown. Refer `Basic Usage` section
`emptyRecordMsg`	`string`	`No options available`	Message to display when no records found
`groupBy`	`string`	`''`	Group the popup list items with the corresponding category by the property name in the object
`closeIcon`	`string`	`circle`	Option to select close icon instead of default. Refer `Close Icon` section
`style`	`object`	`{}`	CSS Customization for multiselect. Refer below object for css customization.
`caseSensitiveSearch`	`bool`	`false`	Enables case sensitivity on the search field.
`closeOnSelect`	`bool`	`true`	Dropdown get closed on select/remove item from options.
`id`	`string`	`''`	Id for the multiselect container and input field(In input field it will append '{id}_input').
`className`	`string`	`''`	Class for the multiselect container wrapper.
`avoidHighlightFirstOption`	`bool`	`false`	Based on flag first option will get highlight whenever optionlist open.
`hidePlaceholder`	`bool`	`false`	For true, placeholder will be hidden if there is any selected values in multiselect
`disable`	`bool`	`false`	For true, dropdown will be disabled
`onSearch`	`function`	`func`	Callback function invoked on search in multiselect, helpful to make api call to load data from api based on search.
`loading`	`bool`	`false`	If options is fetching from api, in the meantime, we can show `loading...` message in the list.
`loadingMessage`	`any`	`''`	Custom loading message, it can be string or component.
`showArrow`	`bool`	`false`	For multiselect dropdown by default arrow wont show at the end, If required based on flag we can display
`customArrow`	`any`	`undefined`	For multiselect dropdown custom arrow option
`keepSearchTerm`	`bool`	`false`	Whether or not to keep the search value after selecting or removing an item
`customCloseIcon`	`ReactNode or string`	`undefined`	Custom close icon and can be string or react component(Check demo for reference)
`selectedValueDecorator`	`(string) => ReactNode \| string`	`v => v`	A function that can be used to modify the representation selected value
`optionValueDecorator`	`(string) => string`	`v => v`	A function that can be used to modify the representation the available options

5. `Ref` as a prop 📌

By using React.createRef() or useRef(), able to access below methods to get or reset selected values

Method Name	Description
`resetSelectedValues`	Programatically reset selected values and returns promise
`getSelectedItems`	Get all selected items
`getSelectedItemsCount`	Get selected items count

constructor() {
  this.multiselectRef = React.createRef();
}

resetValues() {
  // By calling the belowe method will reset the selected values programatically
  this.multiselectRef.current.resetSelectedValues();
}

6. CSS Customization 🌈

{
  multiselectContainer: { // To change css for multiselect (Width,height,etc..)
	....
  },
  searchBox: { // To change search box element look
	border: none;
	font-size: 10px;
	min-height: 50px;
  },
  inputField: { // To change input field position or margin
      margin: 5px;
  },
  chips: { // To change css chips(Selected options)
	background: red;
  },
  optionContainer: { // To change css for option container 
	border: 2px solid;
  }
  option: { // To change css for dropdown options
	color: blue;
  },
  groupHeading: { // To chanage group heading style
	....
  }
}

7. Close Icons ❌

Name	Image
`circle`
`circle2`
`cancel`
`close`

8. Licence 📜

MIT

FAQs

What is d4-multiselect-react-dropdown?

React multiselect dropdown component with search and various features. Visit Snyk Advisor to see a full health score report for d4-multiselect-react-dropdown, including popularity, security, maintenance & community analysis.

Is d4-multiselect-react-dropdown popular?

We’re still processing downloads data for the npm package d4-multiselect-react-dropdown. Visit the popularity section on Snyk Advisor to see the full popularity analysis.

Is d4-multiselect-react-dropdown well maintained?

We found indications that d4-multiselect-react-dropdown is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is d4-multiselect-react-dropdown safe to use?

The npm package d4-multiselect-react-dropdown was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 16 November-2024, at 10:25 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP