React-Morphing-Modal

React Morphing Modal

React-Morphing-Modal

Demo

Installation

$ npm install --save react-morphing-modal
//or
$ yarn add react-morphing-modal

Features

Easy to setup for real, you can make it work in less than 10sec! 🚀
Super easy to customize 👌
Fancy 😎

Usage

The library expose 2 ways to display the modal: getTriggerProps and open. For the basic use case getTriggerProps is fine. But for most of the cases using open is the way to go. Please look at the api for more details.

Basic example

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps } = useModal();
 
  return (
    <div>
      <button {...getTriggerProps()}>Show modal</button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

With a component

Simple case

If you just want to open the modal you can stick with getTriggerProps.

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
const Button = props => (
  <button {...props.getTriggerProps()}>Show modal</button>
);
 
function App() {
  const { modalProps, getTriggerProps } = useModal();
 
  return (
    <div>
      <Button getTriggerProps={getTriggerProps} />
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Real app use case

Most of the time you need to perform different task when a user click a button like calling an api. In that case use the open method as follow.

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
const Button = ({ openModal }) => {
  const btnRef = useRef(null);
  function handleClick() {
    // do some complicated stuff
    openModal(btnRef);
  }
 
  return (
    <button ref={btnRef} onClick={handleClick}>
      Show modal
    </button>
  );
};
 
function App() {
  const { modalProps, open } = useModal();
 
  return (
    <div>
      <Button openModal={open} />
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Use different trigger for the same modal

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal, open } = useModal();
  const triggerRef = useRef(null);
 
  const handleTrigger3 = () => open(triggerRef);
 
  return (
    <div>
      <button {...getTriggerProps()}>Trigger 1</button>
      <button {...getTriggerProps()}>Trigger 2</button>
      <button ref={triggerRef} onClick={handleTrigger3}>
        Trigger 3
      </button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Attribute an id to the trigger

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal();
 
  return (
    <div>
      <button {...getTriggerProps('trigger1')}>Trigger 1</button>
      <button {...getTriggerProps('trigger2')}>Trigger 2</button>
      {/* You can also pass an object  */}
      <button {...getTriggerProps({ id: 'trigger3' })}>Trigger 3</button>
      <span>{activeModal}</span>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Define onOpen and onClose callback

Gloabaly

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal({
    onOpen() {
      console.log('onOpen');
    },
    onClose() {
      console.log('onClose');
    },
  });
 
  return (
    <div>
      <button {...getTriggerProps()}>Trigger</button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Per trigger

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal();
 
  return (
    <div>
      <button
        {...getTriggerProps({
          onOpen: () => console.log('open'),
          onClose: () => console.log('close'),
        })}
      >
        Trigger
      </button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Define background

By default, the modal background is the same as the trigger one. However, you are free to define yours.

Gloabaly

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal({
    background: '#666',
  });
 
  return (
    <div>
      <button {...getTriggerProps()}>Trigger</button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Per trigger

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal();
 
  return (
    <div>
      <button
        {...getTriggerProps({
          background: '#666',
        })}
      >
        Trigger
      </button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Use another event to trigger the modal

By default, the onClick event is used on the trigger.

Gloabaly

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal({
    event: 'onDoubleClick',
  });
 
  return (
    <div>
      <button {...getTriggerProps()}>Trigger</button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Per trigger

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal();
 
  return (
    <div>
      <button
        {...getTriggerProps({
          event: 'onDoubleClick',
        })}
      >
        Trigger
      </button>
      <Modal {...modalProps}>Hello World</Modal>
    </div>
  );
}

Hide the close button

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal();
 
  return (
    <div>
      <button {...getTriggerProps()}>Trigger</button>
      <Modal {...modalProps} closeButton={false}>
        Hello World
      </Modal>
    </div>
  );
}

Remove body padding

import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
 
function App() {
  const { modalProps, getTriggerProps, activeModal } = useModal();
 
  return (
    <div>
      <button {...getTriggerProps()}>Trigger</button>
      <Modal {...modalProps} padding={false}>
        Hello World
      </Modal>
    </div>
  );
}

Api

useModal

HookOptions

import { useModal } from 'react-morphing-modal';
 
const { open, close, activeModal, modalProps, getTriggerProps } = useModal({
  event: 'onClick',
  onOpen: () => console.log('will open'),
  onClose: () => console.log('will close'),
  background: 'purple',
});

Props	Type	Default	Description
event	string	onClick	Any valid react dom event: onClick, onDoubleClick, etc...
onOpen	function	-	A function to call when the modal will open
onClose	function	-	A function to call when the modal will close
background	string	-	Any valid css background: #fffff, rgb(1,1,1), etc

open

open have 2 signatures

import { useModal } from 'react-morphing-modal';
 
const { open } = useModal();
// pass a ref to your trigger
const myRef = React.useRef(null);
 
//somewhere in your app
<MyComponent ref={myRef} />;
 
open(myRef, 'modalId');
open(myRef, {
  id: 'modalId',
  onOpen: () => console.log('will open'),
  onClose: () => console.log('will close'),
  background: 'purple',
});

Props	Type	Default	Description
id	string \| number \| symbol \| null	-	Specify a modal id. It will be assigned to `activeModal`
onOpen	function	-	A function to call when the modal will open
onClose	function	-	A function to call when the modal will close
background	string	-	Any valid css background: #fffff, rgb(1,1,1), etc

close

close does not require any options.

import { useModal } from 'react-morphing-modal';
 
const { close } = useModal();
 
close();

activeModal

activeModal hold the displayed modalId. activeModal is set to null if not id has been used.

import { useModal } from 'react-morphing-modal';
 
const { open, activeModal } = useModal();
 
open(triggerRef, 'modalId');
console, log(activeModal); // print modalId

modalProps

modalProps hold the props that must be passed to the Modal component.

import { useModal, Modal } from 'react-morphing-modal';
 
const { modalProps } = useModal();
 
<Modal {...modalProps} />;

getTriggerProps

getTriggerProps is a convenient method for the simple use case. Under the hood a ref is created and bound to open. getTriggerProps has also 2 signatures.

import { useModal } from 'react-morphing-modal';
 
const { getTriggerProps } = useModal();
 
<button {...trigger('modalId')}>trigger</button>;
<button {...trigger({
  id: 'modalId',
  event: 'onDoubleClcik'
  onOpen: () => console.log('will open'),
  onClose: () => console.log('will close'),
  background: 'purple'
})}>trigger</button>

Props	Type	Default	Description
id	string \| number \| symbol \| null	-	Specify a modal id. It will be assigned to `activeModal`
event	string	onClick	Any valid react dom event: onClick, onDoubleClick, etc...
onOpen	function	-	A function to call when the modal will open
onClose	function	-	A function to call when the modal will close
background	string	-	Any valid css background: #fffff, rgb(1,1,1), etc

Modal Component

import { Modal } from 'react-morphing-modal';
 
<Modal closeButton={true} padding={true}>
  hello
</Modal>;

Props	Type	Default	Description
closeButton	boolean	true	Display a close button
padding	boolean	true	Remove the default padding. Useful when doing some customisation

Browser Support


❌	✅	✅	✅	✅

Release Notes

You can find the release note for the latest release here

You can browse them all here

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome ! Take a look at the contributing guide.

You can also find me on reactiflux. My pseudo is Fadi.

License

Licensed under MIT