QuikieApps

React Popover: Everything You Need to Know About It

React Popover

What is React Popover?

A react popover is basically used in order to display some content on top of another content. After we click or hover over the mouse a pop up box appears. That box simply displays more numbers of contents.

There are certain things that you should keep in mind while using the popOver component:

Usage of React Popover: 

 

import { Popover, Whisper } from ‘rsuite’;

 

If you click on a triggering element, the pop over would appear as if some sort of a tooltip. So, this popover makes my components behave as much native -like or natural as possible. We can position this popover component anywhere left/right/above/below the triggering element and it disappears as soon as the moment you interact with anything else on the page. The pop over will close as soon as the moment you try to open another pop over or just simply click away anywhere else whether it be on the page itself. Also, the pop over gets closed when its trigger has been clicked again. We can use the pop overs in order to display information that is contextual or even for the menus which are more of a type like, “more links” sort of menu.

However, the need for styling for the popover is absolutely minimal but we can bring our own styles to it.

 

The Props:

getTarget:

This function basically returns the React component. It also returns the domnode that the popover is showing on. It is compulsory to use it.

onCancel:

When isCancelable is true then only the onCancel function will work. We simply need to tap the background or press the back button if the user is on Android. It is absolutely optional to use this function.

isOpen:

It will simply indicate whether the dialogue is open or not. It is a Boolean function. This is a required feature.

isCancelable:

Just like isOpen, isCancelable is also a Boolean function. It will simply check whether the dialogue box is closed or not. If the dialogues is cancelable, it will result in the calling of onCancel. It occurs when the background is tapped or when the back button is pressed on an android device. This feature is optional.

isDisabled:

This is a Boolean and it specifies whether the dialogue is disabled or not. This feature is optional.

Animation:

It is a string data type. Animation simply shows or hides and dialogue. It’s value can simply be none or default. This is an optional feature.

Modifier:

This is a string that involves the appearance of the dialogue. This feature is optional.

maskColor:

This is again a string data type. It simply gives the color of the mask. By default it is  rgba(0, 0, 0, 0.2). This one too is an optional feature.

 

animationOptions:

This is an object type and it specifies the duration for animation, the delay and timing. And this one is also an optional feature too.

onPreShow:

This function will appear just before the alertdialog is displayed. Also it is an optional feature.

onPostShow:

The function call occurs once the alertdialog is displayed.

onPreHide:

This function will work just before the alertdialog is hidden. This feature is an optional one.

onPostHide:

This function will generate just after the alertdialog is hidden. This feature is an optional one.

onDeviceBackButton:

This is a function that is a custom handler for the device back button. Like before this too option is optional.

 

React -tiny- popover:

If the discussion is about react then we cannot miss one very important thing.  That thing is nothing but the extremely lightweight, highly customisable and totally non intrusive propover react HOC with no other dependencies. And that is react-tiny-propover and adding to this, it is Typescript friendly as well! Component simply renders its child directly without having to wrap it with anything on the DOM. In addition, it will solely render the JSX that you provide when displayed. It simply catches the child component’s coordinates and it provides a robust and extremely intrusive way for you. This is because it helps position your own content around the child.

The content you have will first append to document.body after it is displayed. But it is removed when hidden. We can also generate little pops around the input or button elements. Maybe the menu flyouts or even in almost every situation where we want some content to appear and disappear dynamically around a target.

What we can also do is that we can specify our own location for the popover content. We can also even hook into the existing process of positioning. This will easily allow us to essentially make the modal windows.  React-tiny-popover will also help in guarding against the dimensions of your current windows. It will also reposition itself for preventing any kind of hidden overflow. We can specify a priority of desired positions for falling back to if we will like. It is also optional that we can provide a function to render for our popover content. This will simply inject the popover’s current position. This will help in case you need to know where it will sit in relation to the target. 

Conclusion: 

To conclude, we have learned a lot about React Popover and most of the concepts that are related to it. We have also covered the information about react-tiny-popover and the advantages it provides us. We hope this article was informative enough for you and will help you start out with using React Popover for your applications. Also it will help you set up interesting popovers for your old or new React Applications. There might be other custom applications that will require popover because React has a number of useful features. Or you also have an option to work and make your own custom solution for adding popovers.

 

Exit mobile version