@codinglane/dropdown

React Dropdown

An easy to use react dropdown for your project!
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
3. Usage
4. Properties
5. Roadmap
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

There are many ways to create a dropdown for react. Personally I was not satisfied with either of them, so I decided to create my own, easy to use dropdown component for react.

(back to top)

Getting Started

All you have to do to use the package is to install it.

• npm

  npm install @codinglane/dropdown

(back to top)

Usage

There are many use cases possible.

If you want to see the different use cases, run npm start inside the dropdown package.

For further information, go to the Properties section

(back to top)

Properties

Prop	Type	Default	Description
id	string	undefined	The current id of the dropdown
value	T	undefined	The current chosen value for the dropdown, typeof string. The value is not getting managed inside the component. You have to provide a function to manage the current chosen value.
searchable	boolean	false	Set this value to true, if you want to have a dropdown with an input field to search for an specific option.
className	string	undefined	Set the classname of the dropdown, if you want to set your custom style.
closeOnSelect	boolean	false	Set this value to true, if you want that the options menu is getting closed as soon as an option is clicked.
fields	Array<DropdownOptions> or <GroupedDropdownOptions>	[]	These are the possible options for the dropdown. If you want to have grouped dropdown options, set the type of the fields to GroupedDropdownOptions and set the group tag for all of them.
placeholder	string	undefined	The placeholder for the dropdown field. When the placeholder is set and the value is undefined or not assignable to any field, the placeholder is getting showed.
onChange	Function	()=>void	The function to manage the current chosen value for the dropdown.
onBlur	Function	undefined	This function is getting called on blur of the options menu.
onFocus	Function	undefined	This function is getting called on focus of the options menu.
onFavorizeOption	Function	undefined	The onFavorizeOption is getting called as soon as the favorize icon in the option menu is getting clicked for an option. This dropdown do not manage the favorites on its own. You have to manage the favorizes to see changes in the component.
favoriteLabels	FavoriteLabels	undefined	The labels for the favorite and non favorite group.
style	DropdownStyleSheet	undefined	Custom stylesheet for the dropdown. It is possible to set the bg color, the color (for text & border), the font size and the font family.
data-testid	string	undefined	For testing purpose.

Types

DropdownOptions

Name	Type
value	string
label	string
favorite	boolean

GroupedDropdownOptions

Name	Type
value	string
label	string
favorite	boolean
group	string

FavoriteLabels

Name	Type
favorite	string
nonFavorite	string

DropdownStyleSheet

Name	Type	Description
dropdownBackgroundColor	string
color	string	The color is getting used for the text and the border bottom
dropdownFontSize	string
dropdownFontFamily	string

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Contributions are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Project Link: https://github.com/CodingLane/dropdown

(back to top)