Kimaru Thagana

Change a React Bootstrap Component's Position Automatically

Kimaru Thagana

Nov 9, 2020
5 Min read
3,118 Views

Nov 9, 2020
5 Min read
3,118 Views

Web Development

Client-side Frameworks

React

Front End Web Development

Introduction

During design and development of frontend interfaces in React.js, you will come across instances where you need to display information once a user clicks or hovers on an item. A popover is a useful tool for this scenario. It's similar to a tooltip, but the difference is that a popover can provide more content.

In this guide, you will learn how to create a popover component. You will also learn how to update a popover's position dynamically. The popover component used in this guide is from React Bootstrap. The guide assumes that you have basic (beginner level) knowledge of React.js.

Go ahead and set up your application.

Set Up Sample App

Open your terminal and run these commands to create a basic React app.

1npx create-react-app react-dynamic-popover
2
3cd react-dynamic-popover
4
5npm start

bash

Include React Bootstrap in your basic React app.

1npm install react-bootstrap bootstrap

bash

In your app.js file, include the stylesheet as well.

1import 'bootstrap/dist/css/bootstrap.min.css';

You can now import bootstrap components, for example:

1import { Button } from 'react-bootstrap';

Create PopOver

Copy the sample code below.

1const popover = (
2    <Popover id="popover-basic">
3        <Popover.Title as="h3">Popover</Popover.Title>
4        <Popover.Content>
5            Hello popover
6        </Popover.Content>
7    </Popover>
8);
9
10function App() {
11    return (
12    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
13        <Button variant="success">Click here</Button>
14    </OverlayTrigger>
15);
16}
17export default App

Overlays are fundamental components for tooltips and popovers. Overlays add support for transitions and toggling visibility. The code above creates a simple popover that pops up when a user clicks the button. You can place the popover component in different positions according to your preferences, i.e., top,bottom, etc. via the placement prop.

In the next example, you will create a popover that repositions itself with respect to changes in content.

Go ahead and copy the sample code below.

1const UpdatingPopover = React.forwardRef(
2    ({ popper, children, show: _, ...props }, ref) => {
3        useEffect(() => {
4            console.log('updating!');
5            popper.scheduleUpdate();
6        }, [children, popper]);
7
8        return (
9            <Popover ref={ref} content {...props}>
10                {children}
11            </Popover>
12        );
13    },
14);
15
16const description = `
17  'React is an open-source, front end, JavaScript library for building user interfaces or UI components.
18      It is maintained by Facebook and a community of individual developers and companies.'
19`;
20const summary = 'React is Cool';
21
22function App() {
23    const [content, setContent] = useState(summary);
24
25    useEffect(() => {
26        const timerId = setInterval(() => {
27            setContent(content === summary ? description : summary);
28        }, 3000);
29
30        return () => clearInterval(timerId);
31    });
32
33    return (
34        <OverlayTrigger
35            trigger="click"
36            placement="bottom"
37            overlay={
38                <UpdatingPopover id="popover-contained">{content}</UpdatingPopover>
39            }
40        >
41            <Button>click me</Button>
42        </OverlayTrigger>
43    );
44}

Making a popover reposition itself every time the size changes requires manual input. In this case, React Bootstrap provides a nifty function called scheduleUpdate, which works with the popper prop. This method is used by the overlay component to reposition itself.

In our example, the popover updates content after a three-second interval once the button is clicked. You then pass content to be rendered from the parent component in UpdatingPopover to its child Popover. This is made possible by React's forwardRef. You can learn more about forwarding refs at the React.js site. In the function UpdatingPopover, you also pass the popper prop and ref to the Popper component, which is rendered on our page. To better understand this approach, the sample code provides a log of every time the content is updated in the popper.

Conclusion

The guide enables you to further build on your frontend skills as a developer. To explore more on this topic. please check out more components at the React-Bootstrap site.

LEARN MORE