@react-md/overlay
TypeScript icon, indicating that this package has built-in type declarations

5.1.6 • Public • Published

@react-md/overlay

Create overlays within your app to help the user focus on a temporary material such as dialogs or drawers.

Installation

npm install --save @react-md/overlay

Since this package isn't that helpful on its own, it is also recommended to install the following packages:

npm install --save @react-md/theme \
  @react-md/button \
  @react-md/typography

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { useState } from "react";
import { render } from "react-dom";
import { Overlay } from "@react-md/overlay";

const App = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button
        id="example-button"
        type="button"
        onClick={() => setVisible((prevVisible) => !prevVisible)}
      >
        Show overlay
      </button>
      <Overlay
        id="example-overlay"
        onClick={() => setVisible(false)}
        visible={visible}
      />
    </>
  );
};

render(<App />, document.getElementById("root"));

Package Sidebar

Install

npm i @react-md/overlay

Weekly Downloads

1,357

Version

5.1.6

License

MIT

Unpacked Size

47.2 kB

Total Files

37

Last publish

Collaborators

  • mlaursen