react-tiny-modals v1.4.3

react-tiny-modals

A super barebones react component library. Featurnig Modal and Popup components.

Install

yarn add react-tiny-modals

or

npm install react-tiny-modals --save

Usage

Modal:

import { Modal } from 'react-tiny-modals'

...

const [showModal, setShowModal] = React.useState(false);

<Modal
  isOpen={showModal}
  onOpen={() => console.log('onopen')}
  onClose={() => console.log('onclose')}
  zIndex={20}
  backOpacity={0.7}
>
  <div>This is the content of the modal.</div>
</Modal>

<button onClick={() => setShowModal(!showModal)}>open modal</button>

Popup:

import { Popup } from 'react-tiny-modals'

...

<Popup
  content={({ show, setShow }) => (
    <div>
      This is the content of the popup.
      <button onClick={() => setShow(!show)}>close</button>
    </div>
  )}
  position={['left', 'right', 'top', 'bottom']}
  align="center"
  reposition={true}
  outerPadding={10}
>
  {({ show, setShow }) => (
    <button onClick={() => setShow(!show)}>open popup</button>
  )}
</Popup>

Props:

Modal:

Popup: