reuse-modal

SSR Friendly Draggable React Modal

Demo:

url: https://vugga.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 @vuga/reuse-modal
3. import { Modal, openModal, closeModal } from '@vuga/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: {
    disableDragging: false,
    enableResizing: {
      bottom: true,
      bottomLeft: true,
      bottomRight: true,
      left: true,
      right: true,
      top: true,
      topLeft: true,
      topRight: true,
    },
  },
  modalClass: 'customModal',
  closeOnClickOutside: true,
  component: BigModalComponent,
  componentProps: { customData: 'your custom props' },
  closeComponent: CloseComponent,
}

API Details

• modalClass: Modal Wrapper class name, default value customModal [type: string]
• closeOnClickOutside: Enable/Disable click outside modal close [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-rnd pass your props within the config parameter as shown in the Sample config section [type: object]

Usage

import React, { Component, Fragment } from 'react';
import { render } from 'react-dom';
import { Modal, openModal, closeModal } from '@vuga/reuse-modal';
import '@vuga/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: {
              disableDragging: false,
              enableResizing: {
                bottom: true,
                bottomLeft: true,
                bottomRight: true,
                left: true,
                right: true,
                top: true,
                topLeft: true,
                topRight: true,
              },
            },
            modalClass: 'customModal',
            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