# react-dropdown-modal

> React dropdown menu component with flexible styling.

Latest version **1.2.5** (published 2019-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dropdown-modal
pnpm add react-dropdown-modal
yarn add react-dropdown-modal
bun add react-dropdown-modal
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.5 |
| Published | 2019-02-09 |
| First published | 2019-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 28.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ritwik Saha |
| Maintainers | ritwik310 |

## Links

- npm: https://www.npmjs.com/package/react-dropdown-modal
- Repository: git@github.com:ritwik310/react-dropdown-modal
- npm.io page: https://npm.io/package/react-dropdown-modal

## Dependencies (2)

- [react](https://npm.io/package/react.md) 16.7.0
- [react-dom](https://npm.io/package/react-dom.md) 16.7.0

## Recent versions

- 1.2.5 (latest) — 2019-02-09
- 1.2.4 — 2019-02-09
- 1.2.3 — 2019-01-16
- 1.2.2 — 2019-01-15
- 1.2.1 — 2019-01-15
- 1.2.0 — 2019-01-15
- 1.1.1 — 2019-01-11
- 1.1.0 — 2019-01-11
- 1.0.2 — 2019-01-10
- 1.0.1 — 2019-01-08
- 1.0.0 — 2019-01-07

## README

# React Dropdown Modal

[![Build Status](https://travis-ci.com/ritwik310/react-dropdown-modal.svg?branch=master)](https://travis-ci.com/ritwik310/react-dropdown-modal)
![](https://img.shields.io/github/license/ritwik310/awesome-react-datepicker.svg)   
A **customizable** Dropdown-menu React component.

## Installation
```shell
yarn run react-dropdown-modal
```

## Example

A sample example here..

<img src="https://raw.githubusercontent.com/ritwik310/react-dropdown-modal/master/screenshots/001.gif" alt="drawing" width="280"/>

### Code


```javascript
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`
```javascript
<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`
```javascript
<Dropdown onClose={() => {
  this.setState({ visible: false });
}}>
  Button
</Dropdown>
```

### preventDefaultClose
- **Type:** `Boolean`
- **Default:** `false`
- **Description:** Prevents Modal from closing.  
- **Required:** `false`
```javascript
<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`
```javascript
<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` 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](#modalContent)
- **Required:** if `modalContent` is defined not necessary, else `true`
```javascript
<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`
```javascript
<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)
```javascript
<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`
```javascript
<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`
```javascript
<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`
```javascript
<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`
```javascript
<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**.
```javascript
<Dropdown modalBorderRadius='4px'>
  Button
</Dropdown>
```

### modalBackground
- **Type:** `String`
- **Default:** By default it's `white`.
- **Description:** To customize `background-color` of the modal.
- **Required:** `false`
```javascript
<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`
```javascript
<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`
```javascript
<Dropdown customZIndex={21}>
  Button
</Dropdown>
```

## Animation Props

### animation
- **Type:** `Boolean`
- **Default:** By default it's `false`, obviously.
- **Description:** animation or not.
- **Required:** `false`
```javascript
<Dropdown animation={true}>
  Button
</Dropdown>
```


### animeType
- **Type:** `String`
- **Possible Values:** `slideDown` | `slideUp` | `slideRight` | `slideLeft` | `fadeIn`
- **Description:** Animation on modal popup or not.
- **Required:** `false`
```javascript
<Dropdown
  animation={true}
  animeType='slideDown'
>
  Button
</Dropdown>
```


### animeDuration
- **Type:** `Number`
- **Possible Values:** `slideDown` | `slideUp` | `slideRight` | `slideLeft` | `fadeIn`
- **Description:** Animation duration on `milliseconds`.
- **Required:** `false`
```javascript
<Dropdown
  animation={true}
  animeType='slideDown'
  animeDuration={300}
>
  Button
</Dropdown>
```

So, thank you & good luck..

---
_Source: https://npm.io/package/react-dropdown-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._