@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiDialog

Package: @uireact/dialog

^v4.2.1

Renders a dialog on top of the content

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/dialog

useDialog 📡

The useDialog hook is used to instantiate a dialog and be able to communicate with the dialogs controller. The UseDialog response will bring a few properties that we will use to manipulate our dialogs:

{
  isOpen, // boolean, will give us if a dialogs is opened or not.
  actions: {
    openDialog, // () => void, function to open a dialog
    closeDialog // () => void, function to close a dialog
  }
};

The dialogs currently uses a default controller that keep track of dialogs using a react state, if you prefer to use your own logic you can follow up this doc to create you own custom dialogs controller.

Example 🤓

By default, the dialog renders centered on top of the content and with a grayed out background that if clicked will close the dialog.


  <DialogsExample 
    title="Dialog title" 
    dialogId="first-dialog-example"
  />

The DialogsExample that we use throughout this doc. This is an example of the code of a component using a dialog:

import React from 'react';

import { UiButton } from '@uireact/button';
import { UiText } from '@uireact/text';
import { 
  UiDialog, 
  UiDialogType, 
  useDialog 
} from '@uireact/dialog';

export const DialogsExample = () => {
  const dialogId = 'someFancyDialogId';
  // Instantiating the dialog hook with a dialogId : string
  const { isOpen, actions } = useDialog(dialogId); 

  React.useEffect(() => {
    if (isOpen) {
      // Do something fancy if the dialog is opened, maybe tracking analytics?
    }
  }, [isOpen]);

  const onClickCB = React.useCallback(() => {
    // This open dialog function internally triggers the open dialog fn in the dialog controller and it passes the dialog id that was used in the useDialog hook.

    actions.openDialog(); 
  }, [actions]);

  return (
    <>
      <UiButton onClick={onClickCB} category="tertiary">Open dialog</UiButton>
      <UiDialog dialogId={dialogId}>
        <UiText>Dialog content</UiText>
      </UiDialog>
    </>
  );
};

Under the hook the UiDialog intantiates the useDialog hook to know if is opened or closed. You can see this here

The magic of using the useDialog hook is that you can control this dialog from anywhere in the react tree you just need to use the same dialog and the isOpen or actions param will be linked to given dialog.

More dialog examples 🤓

Fullscreen dialog

Renders at the right of the screen


  <DialogsExample 
    type={UiDialogType.FULLSCREEN}
    dialogId="fullscreen-example"
  />

Bottom dialog

Renders at the bottom of the screen


  <DialogsExample 
    type={UiDialogType.BOTTOM} 
    dialogId="bottom-example" 
  />

Left dialog

Renders at the left of the screen


  <DialogsExample 
    type={UiDialogType.LEFT} 
    dialogId="left-example" 
  />

Right dialog

Renders at the right of the screen


  <DialogsExample 
    type={UiDialogType.RIGHT} 
    dialogId="right-example"
  />