ReactJS Popup: Modals, Tooltips, and Menus

Posted on Mar 3, 2025 in Computers

Concepts in Focus

1. Third-Party Package: reactjs-popup

NPM contains reactjs-popup, a third-party package to display popups in your application.

It provides a React component that helps you create simple and complex Modals, Tooltips, and Menus for your application.

Installation Command:

1
npm install reactjs-popup

1.1 Advantages

  • ReactJS provides Modal, Tooltip, and Menu components.
  • Provides support for controlled Modals & Tooltips.

2. ReactJS Popup Props

You can provide different props to the ReactJS Popup component. Below are some of the most commonly used props.

PropDescriptionDefault Value
triggerRepresents the element to be rendered in-place where the Popup is defined.JSX element
modalWhen set to true, Popup content will be displayed as a modal on the trigger of Popup. If not, a tooltip will be displayed.false
positionDefines the position of the tooltip. It can be one of ‘top left’, ‘top right’, ‘bottom right’, ‘bottom left’.bottom center
openDefines the state of the Popup. Whether it is opened or not.false
overlayStyleCustom overlay style.object

2.1 trigger Prop

File: src/components/ReactPopup/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Popup from ‘reactjs-popup’ import ‘reactjs-popup/dist/index.css’ import ‘./index.css’ const ReactPopUp = () => (

trigger={
Trigger
} >
<p>React is a popular and widely used programming language</p>



export default ReactPopUp
JSX

Collapse

File: src/components/ReactPopup/index.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
.trigger-button { font-size: 16px; font-weight: 400; font-family: ‘Roboto‘; color: white; padding: 8px 15px 8px 15px; margin: 8px; background-color: #7c69e9; border: none; border-radius: 4px; outline: none; } .popup-container { display: flex; align-items: center; justify-content: center; height: 100vh; }
CSS

Collapse

File: src/App.js

1 2 3 4 5 6
import ReactPopup from ‘./components/ReactPopup’const App = () => { return ReactPopup /> } export default App
JSX
Note

The value of the trigger prop should be a JSX element.

2.2 modal Prop

File: src/components/ReactPopup/index.js

1 2 3 4 5 6 7 8 9 10 11
const ReactPopUp = () => (

modal trigger={
Trigger
} >

>React is a popular and widely used programming language/p>

JSX

Expand

2.3 modal Prop with close button

File: src/components/ReactPopup/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
const ReactPopUp = () => (

modal trigger={
Trigger
} > {close => (

>React is a popular and widely used programming language/p>



type=“button” className=“trigger-button” onClick={() => close()} > Close

)}


export default ReactPopUp
JSX

Collapse

modal-with-close

2.4 position Prop

File: src/components/ReactPopup/index.js

1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
const ReactPopUp = () => (

trigger={
Trigger
} position=“bottom left” >

>React is a popular and widely used programming language/p>




export default ReactPopUp
JSX

Collapse

tooltip

2.5 overlayStyle Prop

File: src/components/ReactPopup/index.js

1 2 3 4 5 6 7 8 9 10 11
const overlayStyles = { backgroundColor: ‘#ffff’, } const ReactPopUp = () => (

modal trigger={
Trigger
JSX

Expand

overlay