@snowcoders/react-dialog

npm install --save @snowcoders/react-dialog save-prefix ~

Usage no npm install needed!

<script type="module">
  import snowcodersReactDialog from 'https://cdn.skypack.dev/@snowcoders/react-dialog';
</script>

README

npm (scoped) CircleCI branch

Use it

npm install --save @snowcoders/react-dialog save-prefix ~

Parent Library

This component is part of a larger components library, react-ui-base. The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy).

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

This component

This component renders it's children in a HTMLDivElement centered within the entire page. Other features provided by this component:

  • Tabbing within the dialog component will stay within the dialog component
  • Clicking the background will fire onBackgroundClick allowing you to close the dialog
  • Pressing the Escape key will also run the onBackgroundClick
  • When the dialog closes, it will set the active element back to whatever it was before it opened