Modal-RT

Simple and very lightweight react modal made with typescript.

Mount <Modal /> Component in any component (Root component prefered)

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Modal } from 'modal-rt';

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Modal />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Use modal api from any component

src/components/component.tsx

import React from 'react';
import { modal } from 'modal-rt';

interface Props {
  name: string;
}

const Component: React.FC<Props> = ({ name }) => {
    const revealModal = () => {
        modal(<div>Hello</div>)
    }


  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button
        onClick={revealModal}
      >Reveal Modal</button>
    </div>
  );
};

export default Component;

Api

Api	Type	Value	Description
modal()	string, JSX.Element or function	Default null	Text or React component which to be showed in the modal.
modal.close(id)	string	default undefined	Close a modal by providing modal id as parameter. If id id is undefined it will close all active modal.

Options for modal api

modal(<div>Hey</div>, options)

Options

{
    animation: true or false
    customTrigger: true or false,
}

Option	Type	Value	Description
animation	boolean	Default true	Triggers Zoom-In and Zoom-Out animation
customTrigger	boolean	default false	Triggers default close button. Custom close funtionality can be achived. See advanched.

Advanched

A function which returns a React component or JSX.Element can also be passed in modal() function.

The function will receive a modal object which has a id property.

Example:

import React from 'react';
import { modal } from 'modal-rt';

interface Props {
  name: string;
}

const Component: React.FC<Props> = ({ name }) => {
    const revealModal = () => {
        modal((modal) => <Component2 id={modal.id} />, { customTrigger: true })
    }


  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button
        onClick={revealModal}
      >Reveal Modal</button>
    </div>
  );
};

export default Component;


interface Props2 {
  id: string;
}

const Component2: React.FC<Props2> = ({ id }) => {
    const close = () => {
        modal.close(id)
    }


  return (
    <div>
      <h1>Hello, Modal!</h1>
      <button
        onClick={close}
      >Close</button>
    </div>
  );
};

export Component2;