JSPM – react-morphing-modal@0.2.2

Package Exports

react-morphing-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-morphing-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Morphing Modal

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>
  );
}

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>
  );
}

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

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

react-morphing-modal

Package Exports

Readme

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