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

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
• 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'));

Development.

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

Deployment

0. To clean the project run yarn clean
1. Publish to npm : npm publish --access public
2. Host into github: npm run deploy