@gulls/modal

1.0.0-canary.1 • Public • Published

@gulls/modal

yarn add @gulls/modal react-modal zustand

Demo

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

Peer Dependencies

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

Package Sidebar

Install

npm i @gulls/modal

Weekly Downloads

0

Version

1.0.0-canary.1

License

MIT

Unpacked Size

28.1 kB

Total Files

3

Last publish

Collaborators

  • jbsmith731