https://github.com/sentriz/react-dropdown-overflow
A react dropdown that pops outside of the parent container with overflow.
https://github.com/sentriz/react-dropdown-overflow
Last synced: 4 months ago
JSON representation
A react dropdown that pops outside of the parent container with overflow.
- Host: GitHub
- URL: https://github.com/sentriz/react-dropdown-overflow
- Owner: sentriz
- Created: 2021-03-30T12:52:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-16T23:25:59.000Z (almost 6 years ago)
- Last Synced: 2025-07-24T06:59:33.390Z (10 months ago)
- Homepage:
- Size: 466 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Links
example: https://github.com/dydokamil/react-dropdown-example
demo: https://dydokamil.github.io/react-dropdown-example/
npm: https://www.npmjs.com/package/react-dropdown-overflow
# Demo
# Installation
yarn add react-dropdown-overflow
or
npm install react-dropdown-overflow
## Importing
import Dropdown from 'react-dropdown-overflow'
## Usage
import Dropdown from 'react-dropdown-overflow'
class MyComponent extends React.Component {
render() {
- item1
- item2
- item3
}>
Toggler
}
}
## Props
##### `mode?: "hover" | "click" = "hover"`
Sets the behavior of the toggling element. Defaults to `hover`. Valid values are:
`hover | click` :: Whether the dropdown is triggered with a mouse click or on hover event.
---
##### `children: ReactNode`
A React component responsible for the toggling of the dropdown.
---
##### `dropdown: ReactNode`
A React component to be displayed as a dropdown.
---
##### `positioning?: "center" | "left" | "right" = "left"`
A string prop responsible for the positioning of the menu. Valid values are:
`left | center | right` :: The position of the dropdown menu.
---
##### `zIndex?: "auto" | number = "auto"`
A number specifying the z-index of the dropdown. Valid values are numbers.
---
##### `hasClickOutsideListener?: boolean = false`
A boolean prop specifying whether the dropdown should be closed when the mouse event is located outside of the entire component. Useful with `click` mode.
---
##### `wrapperId?: string = undefined`
`id` of the newly created element wrapping the `children` prop.
---
##### `className?: string = "dropdown"`
Class name of the newly created element wrapping the dropdown.
---
##### `dropdownWrapperId?: string = undefined`
`id` of the newly created element wrapping the dropdown.
---
##### `isOpen?: boolean = undefined`
A boolean prop responsible for the state of the component (closed/open). Valid values are:
`true | false` :: Whether the menu is visible.
**WARNING**: This changes the component from an uncontrolled to a controlled one.