@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 @dojoswap/limit-orders-react @drivy/cobalt @cryption/dapp-factory-sdk @colisweb/reason-toolkit @convertkit/design @demystdata/ui @buzzcms/components jobiqo-cl knack-ui lbh-frontend soulswap-stop-limit-orders-react soulswap-limit-orders-react ubeswap-swap-dev thekit tinystories treighton-npmtest usemodalwallet @air/zephyr @air/zephyr-stitches @arcanefinance/exchange-interface @arigato/fondant @autonomylabs/limit-orders-react @afosto/instant-search-widget @ajoelp/react-html-wysiwyg @binarycapsule/ui-capsules @builtbypixel/plasma @cabezonidas/shop-ui @absolute/change-tracker @boyneio/flow @cricket-australia/play-cricket-react-ui xx-test-sorry zkit @financeful-eng/system @firepress/ui @firepress/cms @dtribe/react-components @hdream/uniswap-pool @hackney/mtfh-react @heathmont/moon-components @focus-reactive/react-app-layer @htsoft/aiza-wallet-connector @flive/react-kit @fgct/gatsby-plugin-prismic-previews @firestudio/ui @front10/lab @front10/lightbox @ftdata/styleguide @gelatonetwork/limit-orders-react @gelatonetwork/range-orders-react @gelatonetwork/gelato-front-end-lib @friktion-labs/walletkit @freshworks/react-nucleus @frontside/backstage-plugin-scaffolder-workflow @getsynapse/design-system @kyolshin/ui-kit @losslessproject/react-components @ldellaquila/eagleswap @ldellaquila/interface @ironlist/ironlist-ui-library @micromed/herz-ui @newfrontdoor/calendar @nevenhsu/uni-wallet-connect @nearst/ui @entur/modal @fangorn/test @elemental-ui-alpha/modal @mbkit/dialog @mbkit/modal @joesanchezjr/clementine-ui @rasahq/react-tabula @reach/alert-dialog @pyroswap/dex @qualifyze/design-system @real-system/dialog-primitive @openloop/limbic @onrecess/playground @onlaw/ui @polymathnetwork/polymesh-ui @polymeshdev/ui @pooltogether/react-components @paul-bfi/bfi-design-system @past3lle/schematics @novvum/gatsby-theme-auth

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

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

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

7 years ago

7 years ago

7 years ago