https://github.com/pierreamgabriel/react-pretty-dropdown

Customizable dropdown menu for React.
https://github.com/pierreamgabriel/react-pretty-dropdown

dropdown dropdown-menu react react-dropdown reactjs

Last synced: 6 days ago
JSON representation

Customizable dropdown menu for React.

• Host: GitHub
• URL: https://github.com/pierreamgabriel/react-pretty-dropdown
• Owner: pierreamgabriel
• License: mit
• Created: 2022-04-17T21:08:29.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-08T06:12:29.000Z (over 1 year ago)
• Last Synced: 2024-10-25T17:37:53.266Z (20 days ago)
• Topics: dropdown, dropdown-menu, react, react-dropdown, reactjs
• Language: JavaScript
• Homepage:
• Size: 193 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Pretty Dropdown

Customizable dropdown menu for React.

## Screenshot







## Installation

```bash

npm install react-pretty-dropdown

```

## Usage

Import the component and set menu items using anchor tags, Link from react-router-dom, or buttons. It doesn't matter the element you use because they'll have the same style.

```javascript

import Dropdown from 'react-pretty-dropdown';

Item 1

Item 2

Item 3

```

## Props

**background** - Background color.


**textColor** - Text color.


**fontSize** - Font size.


**hoverBackground** - Background color on hover.


**hoverFontColor** - Font color on hover.


**activeBackground** - Background color of active items.


**activeFontColor** - Font color of active items.


**icon** - Menu button icon. Available options: "ellipsis-vertical", "ellipsis", "bars", and "caret-down".


**iconSize** - Menu icon size.


**buttonWidth** - Menu button width.


**buttonBorderOnHover** - Menu button border on hover. Example: "1px solid #0054a8".


**buttonBorderOnFocus** - Menu button border on focus. Example: "1px solid #0054a8".


**buttonFloat** - Only used to align the menu button to the right. Set it to "float-end".


**menuPosition** - Menu horizontal position. The default value is "35px", which leaves no gap between the menu button and items.


**width** - Width of the whole component.


```javascript

Item 1

Item 2

Item 3

```