react-modal

Accessible modal (in React).

View in Storybook.

Install

npm i @bscop/react-modal

Usage

import Modal from "@bscop/react-modal";

function App () {
  return (
    <Modal 
      renderContent={
        () => {
          return (
            <div>
              <p>This is the content of the modal ...</p>
            </div>
          );
        }
      }
      renderHook={
        (props) => {
          return (
            <button type="button" {...props}>Show modal</button>
          );
        }
      }
      rootId="modal-root"
      title="About"
    />
  );
}

CSS Custom properties

You can set the following CSS Custom properties to customize the look of the dropdown component:

:root {
  --main-color: black;
  --main-bg-color: white;

  --modal-backdrop-bg-color: rgba(0, 0, 0, .2);
  --modal-border-color: rgba(0, 0, 0, .2);
  --modal-internal-border-color: #dee2e6;
}

Contribute

Read the guidelines.

Run tests

npm test

Coverage

Coverage reports are hosted on codecov.

npm run badge:coverage -- --token=<guid>

Bruno Scopelliti
www.brunoscopelliti.com