@another-ui/dialog
Just another dialog component for React
Usage
import React from 'react';
import { Dialog, DialogProvider, useDialog } from '@another-ui/dialog';
import '@another-ui/dialog/dist/dialog.css';
const DemoDialog = () => {
const { hide } = useDialog();
return (
<Dialog
className="custom-class"
onClickOverlay={() => hide()}
overlay
padding
scrolling
theme="dark"
>
<h1>Demo</h1>
<button onClick={() => hide()} type="button">Hide</button>
</Dialog>
);
};
const ShowDialogButton = () => {
const { show } = useDialog();
return <button onClick={() => show('DemoDialog')} type="button">Show</button>;
};
export const Example = () => (
<DialogProvider components={{ DemoDialog }}>
<ShowDialogButton />
</DialogProvider>
);