for developers
Welcome
Boilerplates
Code Linting
Github Actions
Private Registry
Styled
Getting StartedGridGrid.ItemModalInstallationProps tableExamplesUsageResponsiveUtils
🔒  Local Setup
🔒  Server Setup
🔒  Code Challenge

Modal

Modal component to render children on top of your content w/ a backdrop.

Installation

yarn add @madebywild/styled-modal
import { Modal } from '@madebywild/styled-modal'

Props table

isOpen
boolean | undefined
isClickAwayDisabled
boolean | undefined
isEscapeKeypressDisabled
boolean | undefined
isBodyScrollLockDisabled
boolean | undefined
backdrop
any
ContentContainer
ComponentClass<unknown, any> | FunctionComponent<unknown> | undefined
onClose
(() => void) | undefined

Examples

Simple Modal w/ default portal target document.body

By default, the modal uses a focus trap, click-away-listener as well as a lock on body scroll.

import React, { useState } from "react";
import styled from "styled-components";
import { Modal } from "@madebywild/styled-modal";


const ModalWrapper = styled.div`
  height: 500px;
  width: 300px;
  background-color: lightsteelblue;
  padding: 20px;
  height: 100%;
  font-family: sans-serif;
`;


function Scene() {
  const [isOpen, setIsOpen] = useState(false);
  const handleClose = () => setIsOpen(false);
  const handleOpen = () => setIsOpen(true);


  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>


      <Modal isOpen={isOpen} onClose={handleClose} portalTarget={document.getElementById("custom-root")}>
        <ModalWrapper>
          <h1>Modal Title</h1>
          <button onClick={handleClose}>Close Modal</button>
        </ModalWrapper>
      </Modal>
    </div>
  );
}

Simple Modal w/ custom portal target

import React, { useState } from "react";
import styled from "styled-components";
import { Modal } from "@madebywild/styled-modal";


function App() {
  return (
    <>
      <div id="custom-root" />
      <Scene />
    </>
  );
}


const ModalWrapper = styled.div`...`;


function Scene() {
  const [isOpen, setIsOpen] = useState(false);
  const handleClose = () => setIsOpen(false);
  const handleOpen = () => setIsOpen(true);


  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>


      <Modal isOpen={isOpen} onClose={handleClose} portalTarget={document.getElementById("custom-root")}>
        <ModalWrapper>
          <h1>Modal Title</h1>
          <button onClick={handleClose}>Close Modal</button>
        </ModalWrapper>
      </Modal>
    </div>
  );
}
import React, { useState } from "react";
import styled from "styled-components";
import { Modal } from "@madebywild/styled-modal";


const ModalWrapper = styled.div`...`;


const Backdrop = styled.div`
  height: 100%;
  width: 100%;
  background-color: rgba(0, 187, 255, 0.5);
`;


function Scene() {
  const [isOpen, setIsOpen] = useState(false);
  const handleClose = () => setIsOpen(false);
  const handleOpen = () => setIsOpen(true);


  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>


      <Modal
        isOpen={isOpen}
        backdrop={<Backdrop />}
        onClose={handleClose}
        portalTarget={document.getElementById("custom-root")}
      >
        <ModalWrapper>
          <h1>Modal Title</h1>
          <button onClick={handleClose}>Close Modal</button>
        </ModalWrapper>
      </Modal>
    </div>
  );
}

Usage

Simple Modal

This example demonstrates the usage of a simple modal component.