JSPM

react-morphing-modal

0.0.2
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 573
    • Score
      100M100P100Q128945F
    • License MIT

    React morphing modal! The easiest way to be fancy!

    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

    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

    Basic example

    import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';

function App() {
  const { modalProps, triggerProps } = useModal();

  return (
    <div>
      <button {...triggerProps()}>Show modal</button>
      <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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button {...triggerProps()}>Trigger 1</button>
      <button {...triggerProps()}>Trigger 2</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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button {...triggerProps('trigger1')}>Trigger 1</button>
      <button {...triggerProps('trigger2')}>Trigger 2</button>
      {/* You can also pass an object  */}
      <button {...triggerProps({ 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, triggerProps, activeModal } = useModal({
    onOpen() {
      console.log('onOpen');
    },
    onClose() {
      console.log('onClose');
    },
  });

  return (
    <div>
      <button {...triggerProps()}>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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button
        {...triggerProps({
          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, triggerProps, activeModal } = useModal({
    background: '#666',
  });

  return (
    <div>
      <button {...triggerProps()}>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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button
        {...triggerProps({
          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, triggerProps, activeModal } = useModal({
    event: 'onDoubleClick',
  });

  return (
    <div>
      <button {...triggerProps()}>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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button
        {...triggerProps({
          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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button {...triggerProps()}>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, triggerProps, activeModal } = useModal();

  return (
    <div>
      <button {...triggerProps()}>Trigger</button>
      <Modal {...modalProps} padding={false}>
        Hello World
      </Modal>
    </div>
  );
}

    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