Dropzy NPM | npm.io

Dropzy

Dropzy is a customizable drop-down list for your ReactJS project.

Specification

Search box : You can use the search box to filter dropdown list items
Animation : Animation of drop-down list on opening and closing
Responsive : Adapts to all screens size
Customizable : Ability to modify several options
Accessibility : Navigable with keyboard

Installation

You can install the Dropzy library with npm :

npm install dropzy

Import Dropzy on your ReactJS project :

import { Dropzy } from 'dropzy';

Use the Dropzy component in your React project :

import { useState } from 'react';

import { Dropzy } from 'dropzy';

export default function App() {
	const [value, setValue] = useState('');
    const options = [
        "value 1",
        "value 2"
    ];
	return (
		<div>
			<Dropzy
				value={value}
				setValue={setValue}
				options={options}
			/>
		</div>
	);
}

Options

Option	Data type	Default	Example	Required	Description
value	string	''	`value={value}`	YES	Value of useState with value select by user
setValue	function		`setValue={setValue}`	YES	Function useState for change value
options	array	[]	`options={['value 1", "value 2"]}`	YES	Options array
animate	booléan (true \| false)	true	`searchInput={false}`	NO	Remove animation when opening and closing dropdown
searchInput	booléan (true \| false)	true	`searchInput={false}`	NO	removing search box to filter dropdown list items
color	string	'#0486c2'	`color={'#FFFFFF'}`	NO	Change Background color of the option at hover mouse
selectHeight	string	'30px'	`selectHeight={'100vh'}`	NO	Change drop-down list height size
optionsHeight	string	'150px'	`optionsHeight={'100vh'}`	NO	Change box height size