@gulls/modal

yarn add @gulls/modal react-modal zustand

Demo

https://codesandbox.io/s/gullsmodal-8d9zm

Peer Dependencies

• React >= 16.8
• React >= 16.8
• react-modal
• zustand

Modal

|Prop | Type | Default | Info | |--- |--- |--- |--- | |appElement |string |#next |ID of element where react is mounted | |className |string |undefined | |

import Modal from '@gulls/modal';

const StyledModal = styled(Modal)`
  .Overlay {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 200px;
  }

  .Modal {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border: 0;
    outline: none;
    background-color: #fff;
  }
`;

Hooks

| | Type | Default | Info | |--- |--- |--- |--- | |modalOpen |string, boolean |false | Modal open or closed. false or the modal name that was passed to toggleModal | |toggleModal |function | | Pass the modal name/ID. Sets value of modalOpen. If no arguments are passed modalOpen = false |

import { useModal } from "@gulls/modal";

const MyComponent = () => {
  const { modalOpen, toggleModal } = useModal();

  return (
    <button
      onClick={() => { toggleModal('demo');}}
    >
      open modal
    </button>
  )
}

Helpers

youTubeID

import { useModal, youTubeID } from "@gulls/modal";

const MyComponent = () => {
  const { modalOpen, toggleModal } = useModal();
  const youTube = youTubeID("https://www.youtube.com/watch?v=dQw4w9WgXcQ");

  return (
    <button
      onClick={() => { toggleModal(youtube);}}
    >
      open YouTube modal
    </button>
  )
}