1.2.5 • Published 5 years ago
react-dropdown-modal v1.2.5
React Dropdown Modal
A customizable Dropdown-menu React component.
Installation
yarn run react-dropdown-modal
Example
A sample example here..
Code
import React, { Component } from 'react';
import Dropdown from 'react-dropdown-modal';
import 'react-dropdown-modal/lib/dropdown.css'; // CSS for the component
class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
}
render() {
return (
<div className="App">
<Dropdown
visible={this.state.visible}
onButtonClick={(e) => {
console.log('Mouse', e.screenX, e.screenY); // You can use Mouse-positions in state
this.setState({ visible: true });
}}
onClose={() => {
this.setState({ visible: false });
}}
modalButtons={{
'New File': () => console.log('Bullet'), // onClick of that button
'Settings': () => console.log('Bullet'),
'Click me!': () => console.log('Ghost!'),
}}
showArrow={true}
arrowPosition={{ right: '0px' }}
position={{
right: '350px', // State Mouse-positions are valid
top: '220px' // State Mouse-positions are valid
}}
>
<button className='that-s€xy-green-btn'>
Click me!
</button>
</Dropdown>
</div>
);
}
}
export default App;
Component Props
visible
- Type:
Boolean
- Description: Boolean to describe the state of the Dropdown. Visible or Invisible.
- Required:
true
<Dropdown visible={true}> // Probably you're gonna reference a state there!
Button
</Dropdown>
onClose
- Type:
Function
- Description: This function runs someone closes the modal.
- Required:
true
<Dropdown onClose={() => {
this.setState({ visible: false });
}}>
Button
</Dropdown>
preventDefaultClose
- Type:
Boolean
- Default:
false
- Description: Prevents Modal from closing.
- Required:
false
<Dropdown preventDefaultClose={true}>
Button
</Dropdown>
onButtonClick
- Type:
Function
- Description: As you can already tell from the example. The function triggers when someone clicks the Dropdown child. In the example below
<p>Button<p>
. - Required:
true
<Dropdown onButtonClick={(e) => {
this.setState({ visible: true });
}}>
<p>Button<p>
</Dropdown>
modalButtons
- Type:
Object
- Description: This
prop
is responsible for rendering the buttons inside the modal. - Details: The example below is going to render two
button
s' with the text inside,Option 1
andOption 2
respectively. OnOption 1
click it willconsole.log
'111!'
, and'222!!'
onOption 2
click. If you want to manually customize the content inside the modal, try modalContent - Required: if
modalContent
is defined not necessary, elsetrue
<Dropdown modalButtons={{
'Option 1': () => console.log('111!'),
'Option 2': () => console.log('222!!')
}}>
Button
</Dropdown>
modalContent
- Type:
Function
- Description: This
prop
is also responsible for rendering the buttons inside the modal, only more customizable. - Details: A function that returns
jsx
that is to be rendered inside the modal. - Required: if
modalButtons
is defined not necessary, elsetrue
<Dropdown modalContent={() => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<a href='#'>Href</a>
<button>More</button>
<button onClick={() => {
console.log('Do this');
}}>Something</button>
</div>
)}>
Button
</Dropdown>
position
- Type:
Object
- Description: An object that specifies the positioning of the modal. Look at the example below for reference.
- Required:
true
(orfalse
, ifcenterPositioning={true}
) (else the modal will just be floating around)
<Dropdown position={{
// left: '200px', // You might just need to define only two sides
right: '350px',
top: '20px',
// bottom: '200px',
}}>
Button
</Dropdown>
centerPositioning
- Type:
Boolean
- Description: Positions the modal in the
middle of the screen
. - Required:
false
<Dropdown centerPositioning={true}>
Button
</Dropdown>
showArrow & arrowPosition
- Type:
Boolean
&Object
- Description:
showArrow
is responsible for showing the triangle on the top of the modal. And you can specify the horizontal positioning of the triangle witharrowPosition
. - Required:
false
<Dropdown showArrow={true}
arrowPosition={{
left: 'auto',
right: '0px'
}}>
Button
</Dropdown>
Customization Props
modalShadow
- Type:
Boolean
|String
- Possible Values:
false
|true
|'0px 0px 10px 0px rgba(0,0,0,0.5)'
- Default: Weird border-less modal. (Believe me you might not like that).
true
has a default value of'0px 0px 10px 0px rgba(0,0,0,0.3)'
. - Description: The name describes itself, I guess.
- Required:
false
<Dropdown modalShadow={true}>
Button
</Dropdown>
modalBorder
- Type:
Boolean
|String
- Possible Values:
false
|true
|'1px solid red'
- Default: Weird border-less modal, again. But this time border-less in actual.
true
has a default value of'1px solid #e2e2e2'
. - Description: The name describes itself, again.
- Required:
false
<Dropdown modalBorder={true}>
Button
</Dropdown>
modalBorderRadius
- Type:
String
- Default: By default it's
border-radius
is0px
. - Description: To customize
border-radius
of the modal. - Required:
false
- Important Note: If you're using default buttons, like in the
modalButtons
. It's gonna cover up the space and it will look like no borders has changed.
<Dropdown modalBorderRadius='4px'>
Button
</Dropdown>
modalBackground
- Type:
String
- Default: By default it's
white
. - Description: To customize
background-color
of the modal. - Required:
false
<Dropdown modalBackground='red'>
Button
</Dropdown>
backgroundMaskColor
- Type:
String
- Default: By default it's
rgba(0, 0, 0, 0)
. - Description: To customize
background-color
of the mask. - Required:
false
<Dropdown backgroundMaskColor='rgba(1, 1, 1, 0.2)'>
Button
</Dropdown>
customZIndex
- Type:
Number
- Default: By default it's
20
. - Description: To customize
z-index
of the whole modal component. - Required:
false
<Dropdown customZIndex={21}>
Button
</Dropdown>
Animation Props
animation
- Type:
Boolean
- Default: By default it's
false
, obviously. - Description: animation or not.
- Required:
false
<Dropdown animation={true}>
Button
</Dropdown>
animeType
- Type:
String
- Possible Values:
slideDown
|slideUp
|slideRight
|slideLeft
|fadeIn
- Description: Animation on modal popup or not.
- Required:
false
<Dropdown
animation={true}
animeType='slideDown'
>
Button
</Dropdown>
animeDuration
- Type:
Number
- Possible Values:
slideDown
|slideUp
|slideRight
|slideLeft
|fadeIn
- Description: Animation duration on
milliseconds
. - Required:
false
<Dropdown
animation={true}
animeType='slideDown'
animeDuration={300}
>
Button
</Dropdown>
So, thank you & good luck..