React-Morphing-Modal

• React-Morphing-Modal
  • Demo
  • Installation
  • Features
  • Usage
    • Basic example
    • With a component
      • Simple case
      • Real app use case
    • Use different trigger for the same modal
    • Attribute an id to the trigger
    • Define onOpen and onClose callback
      • Gloabaly
      • Per trigger
    • Define background
      • Gloabaly
      • Per trigger
    • Use another event to trigger the modal
      • Gloabaly
      • Per trigger
    • Hide the close button
    • Remove body padding
  • Api
    • useModal
      • HookOptions
      • open
      • close
      • activeModal
      • modalProps
      • getTriggerProps
    • Modal Component
  • Browser Support
  • Release Notes
  • Contribute
  • License

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

| | | | | | | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | ❌ | ✅ | ✅ | ✅ | ✅ |

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