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. Popover Component allows the user to show floating content in relation to a target. We can use the following approach in ReactJS to use the Evergreen Popover Component.
Popover Props:
- position: It is used for the position of the Popover.
- isShown: The Popover is manually shown if this is set to true.
- trigger: It is used to open the Popover based on click or hover.
- content: It is used to denote the content of the Popover.
- children: It is used to denote the target button of the Popover.
- display: It is used for the display property passed to the Popover card.
- minWidth: It is used to denote the min-width of the Popover card.
- minHeight: It is used to denote the min-height of the Popover card.
- statelessProps: It is used to denote the properties passed through to the Popover card.
- animationDuration: It is used to denote the duration of the animation.
- onOpen: It is a function that will be triggered when the Popover opens.
- onClose: It is a function that will be triggered when the Popover c.loses.
- 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.
- onBodyClick: It is a function that will be triggered when the body is clicked.
- bringFocusInside: It is used to bring focus inside the Popover on open if this is set to true.
- shouldCloseOnExternalClick: It is used to indicate that clicking outside the dialog should close the dialog if this is set to true.
PopoverStateless Props:
- children: The children can be a string, a function, or a node.
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 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Javascript
import React from 'react'import { Popover, Pane, Button } from 'evergreen-ui'export default function App() {return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h4>ReactJS Evergreen Popover Component</h4> <Popover content={ <Pane width={300} height={300} display="flex" alignItems="center" justifyContent="center" flexDirection="column" >Sample Popover Content </Pane> } > <Button>Click to open Popover</Button> </Popover> </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:
Example 2: In this example, we have learned how can we use dropdown menu in Evergreen Popover component
Javascript
import React from 'react'import { Popover, Pane, Button } from 'evergreen-ui'import "rsuite/dist/rsuite.min.css";import { Dropdown } from 'rsuite';export default function App() {return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h1 style={{color:'green'}}>neveropen</h1> <h4>ReactJS Evergreen Popover Component</h4> <Popover content={ <Pane alignItems="center" justifyContent="center" flexDirection="column" > <Dropdown.Menu > <Dropdown.Item >New File</Dropdown.Item> <Dropdown.Item>New File with Current Profile</Dropdown.Item> <Dropdown.Item >Download As...</Dropdown.Item> <Dropdown.Item >Export PDF</Dropdown.Item> </Dropdown.Menu> </Pane> } > <Button>Click to open Popover</Button></Popover> </div>);} |
OUTPUT
Reference: https://evergreen.segment.com/components/popover
