npm package: @haribhandari/react-popup-modal
Description: @haribhandari/react-popup-modal
Latest version: 1.2.4

# reuse-modal

SSR Friendly Draggable React Modal With react-rnd And react-spring Support.

## Demo:

url: https://tarex.github.io/reuse-modal/

## Prerequisite

```
"react": "^16.8.2",
"react-dom": "^16.8.2"
```

## Installation

1. `yarn add react@next react-dom@next`
2. `yarn add @redq/reuse-modal`
3. `import { Modal, openModal, closeModal } from '@redq/reuse-modal';`
4. To trigger modal, use `openModal` and `closeModal` and use `<Modal />` in you app in root level or in the parent component.
5. pass modal configuration through `openModal(config)` like below.
6. `yarn start`

### Sample Config

```
{
  config: {
    className: 'customModal',
    disableDragging: false,
    enableResizing: {
      bottom: true,
      bottomLeft: true,
      bottomRight: true,
      left: true,
      right: true,
      top: true,
      topLeft: true,
      topRight: true,
    },
  },
  withRnd: false,
  overlayClassName: 'customeOverlayClass',
  closeOnClickOutside: true,
  component: BigModalComponent,
  componentProps: { customData: 'your custom props' },
  closeComponent: CloseComponent,
}
```

### API Details

- **className**: Modal Wrapper class name, default value `customModal` `[type: string]`
- **overlayClassName**: Modal overlay class name, default value `''` `[type: string]`
- **closeOnClickOutside**: Enable/Disable click outside modal close `[type: boolean]`
- **withRnd**: Enable/Disable React Rnd support. By default we added react spring for animation and if you needed dragging feature then simply use `withRnd: true` `[type: boolean]`
- **component**: The component you want to render inside the Modal `[type: component]`
- **componentProps**: pass the props you need in the Modal component `[type: object]`
- **closeComponent**: Close component to close the Modal `[type: Component]`
- **config**: Modal can be draggable and resizeble as we have provided support with [react-rnd](https://github.com/bokuweb/react-rnd)
- **config**: to customize react spring config pass your props within the config parameter as shown in the Sample config section [react-spring](https://github.com/react-spring/react-spring)

### Usage

```
import React, { Component, Fragment } from 'react';
import { render } from 'react-dom';
import { Modal, openModal, closeModal } from '@redq/reuse-modal';
import '@redq/reuse-modal/lib/index.css';

const CloseComponent = () => {
  return <button onClick={() => closeModal()}>close </button>;
};

const BigModalComponent = props => (
  <Fragment>
    <h1>Modal </h1>
    <p>{props.customData}</p>
  </Fragment>
);

const Basic = () => {
  return (
    <div>
      <button
        onClick={() =>
          openModal({
            config: {
              className: 'customModal',
              disableDragging: false,
              enableResizing: {
                bottom: true,
                bottomLeft: true,
                bottomRight: true,
                left: true,
                right: true,
                top: true,
                topLeft: true,
                topRight: true,
              },
              width: 480,
              height: 650,
              animationFrom: { transform: 'scale(0.3)' }, // react-spring <Spring from={}> props value
              animationTo: { transform: 'scale(1)' }, //  react-spring <Spring to={}> props value
              transition: {
                mass: 1,
                tension: 130,
                friction: 26,
              }, // react-spring config props
            },
            withRnd: false,
            overlayClassName: 'customeOverlayClass',
            closeOnClickOutside: false,
            component: BigModalComponent,
            componentProps: { customData: 'your custom props' },
          })
        }
      >
        Open Modal
      </button>
    </div>
  );
};

class Demo extends Component {
  render() {
    return (
      <div>
        <h1>reuse-modal Demo</h1>
        <Basic />
        <Modal />
      </div>
    );
  }
}

render(<Demo />, document.querySelector('#demo'));

```

### Development.

- `npm i -g nwb`
- Check `package.json` command

### Deployment

1. Publish to npm : `npm publish --access public`
2. Host into github: `npm run deploy`