@placardi/modal

A modal can be used to display some content on top of another.

Installation

npm i @placardi/modal

Dependencies

• react
• styled-components
• @placardi/theme

Usage

Basic usage

In order to use the modal component, wrap the application in global theme provider from @placardi/theme. Then, use the modal as any regular component.

import React, { FC, useState } from 'react';
import ThemeProvider from '@placardi/theme';
import Modal from '@placardi/modal';

const App: FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ThemeProvider>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        Take me places!
      </Modal>
    </ThemeProvider>
  );
};

export default App;

Disabling body scroll when modal is open

By default, modal will not prevent scroll on the document body element. In order to enable that behaviour, pass it a disableBodyScroll prop.

import React, { FC, useState } from 'react';
import ThemeProvider from '@placardi/theme';
import Modal from '@placardi/modal';

const App: FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ThemeProvider>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        disableBodyScroll
      >
        Take me places!
      </Modal>
    </ThemeProvider>
  );
};

export default App;