simple-react-dropdown
is a very simple component that provides a dropdown of
sorts. You can actually think of it as a modal. It comes with no styles, but
with support to use CSS modules styles.
I couldn't find any simple re-usable dropdowns which allowed for CSS modules and did just the one thing.
npm i simple-react-dropdown -S
import React from 'react'
import Dropdown from 'simple-react-dropdown'
class App extends React.Component {
handleMouseDown () {
// fetch options aync maybe?
// log that the dropdown has been opened? whatever you want!
}
render () {
const content = `
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
`
return (
<div>
<Dropdown content={content} onMouseDown={this.handleMouseDown}>
'Open me!'
</Dropdown>
</div>
)
}
}
Element/text/component that will be used as the trigger element.
Element/text/component that will be used as the menu.
container
key will be used for thecontainer
element wrapping the entire dropdowntrigger
key will be used for thetrigger
element wrapping the children elements
Will prevent any clicks from actually opening the dropdown or running onMouseDown
.
Callback for when the trigger element is clicked on.