@react-above/modal-theme-default

Installation

$ yarn add @react-above/modal-theme-default

Usage

1. Create Modal component

/* Somewhere in your UI layer.. */

import { createModal } from '@react-above/modal'
import { ThemeDefault } from '@react-above/modal-theme-default'

export const Modal = createModal({
  theme: ThemeDefault(),
  // ...
})

2. Use anywhere

import { Modal } from '@app/ui'

<Modal isOpen={isOpen} close={close}>
  <Modal.Surface>
    <Modal.Header title="My modal" close={close} />
    <Modal.Body>My modal text</Modal.Body>
  </Modal.Surface>
</Modal>

API

Modal.Surface

The container for your modal content

interface Props {
  /*
   * true - fill fullscreen OR more (depends on content size)
   * 'strict' - fill fullscreen precisely (you should manage overflow inside)
   */
  fullscreen?: boolean | 'strict'
}

Modal.Header

The modal's top part

interface Props {
  title?: string
  close?: () => void
}

Modal.Body

The modal's content part

interface Props {}