@reach/dialog NPM | npm.io

0.18.0 • Published 2 years ago

Install

Weekly downloads

153,702

License

MIT

Repository

Last release

2 years ago

@reach/dialog

Docs | Source | WAI-ARIA

An accessible dialog or modal window.

import { Dialog } from "@reach/dialog";
import "@reach/dialog/styles.css";

function Example(props) {
	const [showDialog, setShowDialog] = React.useState(false);
	const open = () => setShowDialog(true);
	const close = () => setShowDialog(false);

	return (
		<div>
			<button onClick={open}>Open Dialog</button>
			<Dialog isOpen={showDialog} onDismiss={close}>
				<button className="close-button" onClick={close}>
					<VisuallyHidden>Close</VisuallyHidden>
					<span aria-hidden>×</span>
				</button>
				<p>Hello there. I am a dialog</p>
			</Dialog>
		</div>
	);
}

@reach/polymorphic @reach/portal @reach/utils react-focus-lock react-remove-scroll

@midigator/styleguide astrid-app gatsby-universal freemium-ui-trial @sellics/ui-kit gatsby-theme-providence @karan-u-kanthawar/dappfactorysdk sinopia_editor @gelatonetwork/stop-limit-orders-react @djaciel/react-components @plum-xoxo/stores-dsm @transferwise/marketing-components @infinitebrahmanuniverse/nolb-_reach @everything-registry/sub-chunk-763 xx-test-sorry zkit @wooy/react-components @swiftcarrot/kit @wzuo/kit @viewstools/create-react-app @wangzuo/kit @web3-react-widgets/core @types/reach__dialog @tm-tools/tm-ui electric-ladyland electric-ladyland-form @sudophunk/interface @tieto/ehr-minu-andmed-ui @tillen/fresco @tiller-ds/alert @tiller-ds/form-elements-advanced @thinkincoin/swap @ticketswap/solar @theme-components/dialog @theme-components/reach-dialog @theme-stack/dialog duodealer-design-system @swappy-so/swap-kit ehr-suhtlus-ui ehr-minu-andmed-ui @twilio-paste/modal-dialog-primitive @arigato/fondant gatsby-theme-use-shopping-cart gatsby-theme-contentful-portfolio gatsby-theme-netlify-identity gatsby-theme-personal-blog gatsby-primerbook-theme firestudio-ui @zalastax/nolb-_reach @ajoelp/react-html-wysiwyg @afosto/instant-search-widget @zachsz/gatsby-plugin-prismic-previews @zoralabs/simple-wallet-provider @air/zephyr @air/zephyr-stitches @zuludmmswap/interface @xkit/dialog @absolute/change-tracker @dtribe/react-components mtfh-common @elemental-ui-alpha/modal dapp-factory-sdk-test lbh-frontend @colisweb/reason-toolkit buzzcms-rich-text @demystdata/ui chaser-components new-reach-ui @fgct/gatsby-plugin-prismic-previews @financeful-eng/system @fangorn/test minerva-ui archer-limit-orders-react @binarycapsule/ui-capsules @autonomylabs/limit-orders-react @boyneio/flow @focus-reactive/react-app-layer @front10/lab @front10/lightbox @frontside/backstage-plugin-scaffolder-workflow @freshworks/react-nucleus @friktion-labs/walletkit datel-minu-andmed-ui localist-viewer dat-ui-kit @entur/modal @cabezonidas/shop-ui bilal-test-ui bfi-design-system @dojoswap/limit-orders-react chakra-ui chakra-design-system clever-react jobiqo-cl colist @cricket-australia/play-cricket-react-ui brydge-sdk @cryption/dapp-factory-sdk bs-reach @convertkit/design

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago