mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
.. | ||
__snapshots__ | ||
index.ts | ||
modal-overlay.scss | ||
modal-overlay.stories.tsx | ||
modal-overlay.test.tsx | ||
modal-overlay.tsx | ||
modal-overlay.types.ts | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { ModalOverlay } from './modal-overlay'; # ModalOverlay `ModalOverlay` is a transparent overlay that covers the entire screen. It is used to dim the background when a modal is open. <Canvas> <Story id="components-componentlibrary-modaloverlay--default-story" /> </Canvas> ## Props The `ModalOverlay` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props <ArgsTable of={ModalOverlay} /> ### On Click Use the `onClick` prop to handle clicks on the overlay <Canvas> <Story id="components-componentlibrary-modaloverlay--on-click" /> </Canvas> ```jsx import React, { useState } from 'react'; import { ModalOverlay } from '../../component-library'; const [open, setOpen] = useState(false); const handleOnClick = () => { setOpen(!open); }; <button onClick={handleOnClick}>Show modal overlay</button>; { open && <ModalOverlay onClick={handleOnClick} />; } ```