@redq/reuse-modal NPM

reuse-modal

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

Demo:

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

Prerequisite

"react": "17.0.1",
"react-dom": "17.0.1"

Installation

yarn add react@next react-dom@next
yarn add @redq/reuse-modal
import { Modal, openModal, closeModal } from '@redq/reuse-modal';
To trigger modal, use openModal and closeModal and use <Modal /> in you app in root level or in the parent component.
pass modal configuration through openModal(config) like below.
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
config: to customize react spring config pass your props within the config parameter as shown in the Sample config section 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'));