ReactJS Evergreen Dialog Component

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 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 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
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.
Project Structure
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>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://evergreen.segment.com/components/dialog
ReactJS-Evergreen
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to do crud operations in ReactJS ?
How to install bootstrap in React.js ?
React-Router Hooks
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to set the default value for an HTML <select> element ?