https://github.com/crystallizeapi/react-dialog
React component to display accessible dialogs
https://github.com/crystallizeapi/react-dialog
Last synced: 8 months ago
JSON representation
React component to display accessible dialogs
- Host: GitHub
- URL: https://github.com/crystallizeapi/react-dialog
- Owner: CrystallizeAPI
- License: mit
- Created: 2018-05-02T09:49:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T20:37:12.000Z (almost 3 years ago)
- Last Synced: 2024-11-06T12:23:50.631Z (about 1 year ago)
- Language: JavaScript
- Size: 4.94 MB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @crystallize/react-dialog
React component to display accessible dialogs. This is a [general purpose component to build awesome and accessible dialogs in react](https://crystallize.com/developers/react-components/react-dialog). Built initially for use in the [Crystallize headless commerce service](https://crystallize.com).
Uses [styled-components](https://npmjs.org/package/styled-components) and [a11y-dialog](https://www.npmjs.com/package/a11y-dialog). Leverages the [native dialog HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) when possible
This module uses **Promises** and does *not* provide a polyfill. To easily
provide Promise polyfills for your users, try [polyfills.io](https://polyfill.io/v2/docs/)
## Demo
[Demo](https://react-dialog.milliseconds.io)
## Usage
```
yarn add @crystallize/react-dialog styled-components
```
### In your app root
```
import { Wrapper } from '@crystallize/react-dialog';
export default () => (
);
```
### Use it
```
import { showDialog, showAlert, showConfirm, closeCurrent } from '@crystallize/react-dialog';
await showDialog('Hey dude');
await showDialog({
body: Hey dude
});
await showAlert('Wow');
const confirmResult = await showConfirm('Are you sure?');
const confirmResult = await showConfirm({
body:
JSX rules,
buttons: {
ok: p => Allrighty,
cancel: p => Nope
}
});
// Closes any open dialog
closeCurrent();
```
## Wrapper props
| Prop Name | Default | Type | Description |
| ------------ | ------- | ---- | ------------------------------------------ |
| cleanTheme | false | bool | Use the clean theme instead of the default |
| ButtonOk | false | jsx | Set a custom default Ok button |
| ButtonCancel | false | jsx | Set a custom default Cancel button |
| ButtonClose | false | jsx | Set a custom default Close button |
| Heading | false | jsx | Set a custom default Heading |
## Dialog functions
All of the show dialog functions (showDialog, showAlert, showConfirm) returns a promise when called. The promise is resolved when the dialog is closed. The return value of the
promise changes depending on which type of dialog it is
The functions accepts a single string argument. They also support a single object as argument with these common properties:
```
{
title:
Hi there
body: 'you',
showCloseButton: false (default is true),
disableBackdropClick: false
}
```
showConfirm does however accept a few more:
```
...
buttons: {
ok: props => {props.children},
cancel: "Nope nope!"
}
```
showConfirm resolves its promise with either "ok" or "cancel"