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.

Getting Started

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

• npm

  npm install @codinglane/dropdown

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

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 | |

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

License

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

Contact

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