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 buttons' with the text inside, Option 1 and Option 2 respectively. On Option 1 click it will console.log '111!', and '222!!' on Option 2 click. If you want to manually customize the content inside the modal, try modalContent
• Required: if modalContent is defined not necessary, else true

<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, else true

<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 (or false, if centerPositioning={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 with arrowPosition.
• 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 is 0px.
• 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..