@reach/dialog NPM | npm.io

0.18.0 • Published 3 years ago

Install

Weekly downloads

153,702

License

MIT

Repository

Last release

3 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 td-stylekit swaptoken web3-react-modal jobiqo-cl knack-ui lbh-frontend localist-viewer @wangzuo/kit @web3jskit/walletkit @web3-react-widgets/core @wzuo/kit @wooy/react-components @twilio-paste/modal-dialog-primitive @types/reach__dialog @tm-tools/tm-ui @thinkincoin/swap @ticketswap/solar @tieto/ehr-minu-andmed-ui @tiller-ds/form-elements-advanced @tillen/fresco @tiller-ds/alert @theme-stack/dialog @theme-components/dialog @theme-components/reach-dialog @viewstools/create-react-app @xkit/dialog @zalastax/nolb-_reach @zachsz/gatsby-plugin-prismic-previews @zoralabs/simple-wallet-provider @zuludmmswap/interface archer-limit-orders-react @past3lle/schematics @pantheon-systems/design-toolkit-react @paul-bfi/bfi-design-system @polymathnetwork/polymesh-ui @polymeshdev/ui @pooltogether/react-components @play4them/design-system @play4them/fresco @plum-xoxo/qib-dsm gatsby-theme-contentful-portfolio gatsby-interface gatsby-primerbook-theme gatsby-theme-personal-blog gatsby-theme-netlify-identity gatsby-theme-use-shopping-cart duodealer-design-system ehr-minu-andmed-ui ehr-suhtlus-ui electric-ladyland electric-ladyland-form firestudio-ui @absolute/change-tracker @buzzcms/components @cabezonidas/shop-ui @builtbypixel/plasma @binarycapsule/ui-capsules @boyneio/flow buzzcms-rich-text chaser-components chakra-ui chakra-design-system clever-react clubafricain colist crosschain-react dapp-factory-sdk-test dat-ui-kit datel-minu-andmed-ui bilal-test-ui brydge-sdk bs-reach bfi-design-system @arcanefinance/exchange-interface @afosto/instant-search-widget @air/zephyr @air/zephyr-stitches @arigato/fondant @ajoelp/react-html-wysiwyg @autonomylabs/limit-orders-react soulswap-stop-limit-orders-react soulswap-limit-orders-react ubeswap-swap-dev thekit tinystories treighton-npmtest

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

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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago