react-dropdown-animated

A customizable dropdown menu button with simple animations for React. For those who like a little animation on your React app for some pizzaz.

Installation

npm install react-dropdown-animated

Usage

Default styling of the component can be overridden. Component can be imported using

import Dropdown from "react-dropdown-animated"

Props

The dropdown button takes the following props:

| Prop | Type | Description | Default value | |---|---|---|---| | value | string | The value of the button text. | Dropdown button | | options | object[] | An array of objects containing the content and the callback function when the option is clicked. | options=[{content: 'Default Option 1', onClick: (event) => console.log('Option 1 clicked!')}, {content: 'Default Option 2', onClick: (event) => {console.log('Option 2 clicked!')}}] | | initial | number | The percentage value of the initial y position of the button. A higher value indicates the button moves in faster from a higher position. | 50 | | exit | number | The percentage value of the exit y position of the button. A higher value indicates the button moves out faster to a higher position. | 25 | | buttonFontColor | string | The hex code of the button font color. | #ffffff | | buttonBackgroundColor | string | The hex code of the button background color. | #227fe3 | | buttonOutlineColor | string | The hex code of the button outline color. | #8080808a | | buttonBorderRadius | number | The value of the border-radius CSS property in pixels. | 4px | | closeOnOutsideClick | boolean | If true, closes the dropdown menu on click anywhere outside of the menu. | true |

Development

Check out the component and help development with

git clone https://github.com/danielyuenhx/react-dropdown-animated.git
cd react-dropdown-animated
npm install

Start the development server with

npm start