ReactJS Evergreen Dialog Component

Last Updated : 05 Jun, 2021

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Dialog Component allows the user to show content on top of an overlay which requires user interaction. We can use the following approach in ReactJS to use the Evergreen Dialog Component.

Dialog Props:

children: The children can be a string, a function, or a node.
intent: It is used to denote the intent of the Dialog.
isShown: It is used to show the dialog when this is set to true.
title: It is used to denote the Title of the Dialog.
hasHeader: The header with the title and close icon button will be shown if this is set to true.
header: It is used to override the default header with our own custom component.
hasFooter: It is used to show the footer with the cancel and confirm button when it is set to true.
footer: It is used to override the default footer with our own custom component.
hasCancel: It is used to show the cancel button when this is set to true.
hasClose: It is used to show the close button when this is set to true.
onCloseComplete: It is a function that will be triggered when the exit transition is complete.
onOpenComplete: It is a function that will be triggered when the enter transition is complete.
onConfirm: It is a function that will be triggered when the confirm button is clicked.
confirmLabel: It is used to denote the label of the confirm button.
isConfirmLoading: The confirm button is set to loading state when this is set to true.
isConfirmDisabled: The confirm button is set to disable state when this is set to true.
onCancel: It is a function that will be triggered when the cancel button is clicked.
cancelLabel: It is used to denote the label of the cancel button.
shouldCloseOnOverlayClick: It is used to indicate whether overlay should close the overlay on click or not.
shouldCloseOnEscapePress: It is used to indicate whether pressing ESC key should close the overlay or not.
width: It is used to denote the width of the Dialog.
topOffset: It is used to denote the space above the dialog.
sideOffset: When there is not enough horizontal space available on the screen, it is used to denote the space on the left/right sides of the dialog.
minHeightContent: It is used to denote the min-height of the body content.
containerProps: It is used to denote the props that are passed to the dialog container.
contentContainerProps: It is used to denote the props that are passed to the content container.
preventBodyScrolling: It is used to indicate whether to prevent scrolling in the outer body or not.
overlayProps: It is used to denote the props that are passed to the Overlay component.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install evergreen-ui
```

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import { Dialog, Button } from 'evergreen-ui'

export default function App() {

  const [openDialog, setOpenDialog] = React.useState(false)

  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>ReactJS Evergreen Dialog Component</h4>

      <Button onClick={() => setOpenDialog(true)}>
        Open Dialog
      </Button>

      <Dialog
        isShown={openDialog}
        title="Sample Dialog"
        confirmLabel="This is a sample dialog for demo"
        onCloseComplete={() => setOpenDialog(false)}
      >
        Dialog content
      </Dialog>
    </div>
  );
}