Skip to content
React fullscreen modal with swag 😎
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
example Bump lodash from 4.17.11 to 4.17.14 in /example Jul 15, 2019
scss tweak for mobile Jul 8, 2019
src change triggerProps to getTriggerProps Jul 10, 2019
test
.gitignore
.travis.yml
CODE_OF_CONDUCT.md add code of conduct Jul 10, 2019
CONTRIBUTING.md
LICENSE add license Jul 8, 2019
README.md update doc πŸ“˜ Jul 10, 2019
package.json
tsconfig.json initial commit Jun 30, 2019
yarn.lock Bump lodash from 4.17.11 to 4.17.14 Jul 15, 2019

README.md

React-Morphing-Modal

Travis (.org) npm npm NPM Coveralls github

React Morphing Modal

Demo

Demo time

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

IE Chrome Firefox Safari Edge
❌ βœ… βœ… βœ… βœ…

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

You can’t perform that action at this time.