How To Implement React Suite Popover Component In React JS

Hello Developers, In this blog, we will learn how we can implement react suite popover component in our react app

First, make a new app using the following command

npx create-react-app

Then install react suite library in your app using following command

npm i rsuite

Now import all important files in your app js file

import { Popover } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';

This is default popover

<Popover title="Title" visible>
  <p>This is a default Popover </p>
  <p>Content</p>
</Popover>

Demo:

You can change position of popover by using placement prop

import { Whisper } from 'rsuite'

<Whisper trigger={'click'} speaker={
   <Popover title="Title" visible >
     <p>This is a default Popover </p>
     <p>Content</p>
   </Popover>
 } placement='bottom'>
   <Button style={{ width: '150px' }}>Click Me</Button>
 </Whisper>

Whisper provides trigger props, which are used to control the display of Popover in different ways.

Demo:

There are many types of trigger available

click : this method will be triggered when the element is clicked and closed when clicked again.

Contextmenu : this method will be triggered when you trigger contextMenu on the element,

Focus: this method is generally triggered when the user clicks or taps on that element or selects it with the keyboard’s tab key.

Hover : this method will be triggered when the cursor (mouse pointer) is hovering over the element.

Active: this method is triggered when the element is activated.

<Whisper trigger={'click'} speaker={
   <Popover title="Title" visible >
     <p>This is a default Popover </p>
     <p>Content</p>
   </Popover>
 } placement='bottom'>
   <Button style={{ width: '150px' }}>Click Me</Button>
 </Whisper>
 <Whisper trigger={'contextMenu'} speaker={
   <Popover title="Title" visible >
     <p>This is a default Popover </p>
     <p>Content</p>
   </Popover>
 } placement='bottom'>
   <Button style={{ width: '150px' }}>Context menu</Button>
 </Whisper>
 <Whisper trigger={'focus'} speaker={
   <Popover title="Title" visible >
     <p>This is a default Popover </p>
     <p>Content</p>
   </Popover>
 } placement='bottom'>
   <Button style={{ width: '150px' }}>Focus</Button>
 </Whisper>
 <Whisper trigger={'hover'} speaker={
   <Popover title="Title" visible >
     <p>This is a default Popover </p>
     <p>Content</p>
   </Popover>
 } placement='bottom'>
   <Button style={{ width: '150px' }}>Hover</Button>
 </Whisper>
 <Whisper trigger={'active'} speaker={
   <Popover title="Title" visible >
     <p>This is a default Popover </p>
     <p>Content</p>
   </Popover>
 } placement='bottom'>
   <Button style={{ width: '150px' }}>Active</Button>
 </Whisper>

Demo: