Skip to main content

Get Started

react-dialogues is a lightweight React library for displaying modals, toasts, and popovers with an imperative API. No need to manage state or place components in your JSX tree.

npm bundle size

Installation​

npm install react-dialogues

And that's it! No more configuration is required.

Quick Examples​

Show a modal dialog with a single function call. The Modal.show() method accepts content and options, returning a controller that doubles as a Promise.

import { Button, Modal } from 'react-dialogues';

<Button
  onClick={() => {
    Modal.show('Welcome to react-dialogues!', {
      title: 'Hello',
    });
  }}
>
  Show Modal
</Button>;

Async/Promise Handling​

Modal.show() returns a Promise that resolves when the modal closes. Use await to get the user's chosen action and respond accordingly.

import { Button, Modal, Toast } from 'react-dialogues';

async function handleClick() {
  const [action] = await Modal.show({
    title: 'Unsaved Changes',
    content: 'You have unsaved changes…',
    buttons: [
      'Cancel',
      <Button value="discard" type="secondary">
        Discard
      </Button>,
      <Button value="save">Save</Button>,
    ],
  });

  if (action === 'save') {
    Toast.success('Changes saved!');
  } else if (action === 'discard') {
    Toast.info('Changes discarded');
  } else {
    Toast.info('Action cancelled');
  }
}

<Button onClick={handleClick}>Close Document</Button>;

Toast​

Display notification messages with Toast.show(). Use shorthand methods like Toast.success(), Toast.error(), Toast.warning(), and Toast.info() for styled notifications.

import { Button, Toast } from 'react-dialogues';

<Button
  onClick={() => {
    Toast.success('Operation completed successfully!');
  }}
>
  Show Toast
</Button>;

Tooltip​

Wrap any element with Tooltip to show contextual information on hover or focus.

import { Tooltip, Button } from 'react-dialogues';

<Tooltip content="Helpful information appears here">
  <Button>Hover me</Button>
</Tooltip>;

Next Steps​