ReactJS Evergreen CornerDialog Component

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. CornerDialog Component is used for announcements like new features, feedback requests, etc. We can use the following approach in ReactJS to use the Evergreen CornerDialog Component.

CornerDialog Props:

• children: The children can be a string, a function or a node.
• intent: It is used to denote the intent of the CornerDialog.
• 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.
• 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.
• hasFooter: It is used to show the footer with the cancel and confirm button when it is set to true.
• 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.
• 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.
• onCancel: It is a function that will be called when the cancel button is clicked.
• cancelLabel: It is used to denote the label of the cancel button.
• width: It is used to denote the width of the Dialog.
• containerProps: It is used to denote the props that are passed to the dialog container.
• position: It is used to set the position of the corner dialog

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.

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 { CornerDialog, 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 CornerDialog Component</h4>

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

      <CornerDialog
        isShown={openDialog}
        title="New Feature is live"
        onCloseComplete={() => setOpenDialog(false)}
      >
        Please give your valuable feedback for this new feature
      </CornerDialog>
    </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/corner-dialog