Installing / Getting started

This package is available from the NPM repository as reactjs-popup. It will work correctly with all popular bundlers.

npm install reactjs-popup --save

Using yarn

yarn add reactjs-popup

Include the component

To start using reactjs-popup you just need to import the component from the package.

import React from 'react';
import Popup from 'reactjs-popup';
const PopupExample = () => (
<Popup trigger={<button> Trigger</button>} position="right center">
<div>Popup content here !!</div>
</Popup>
);
important

Starting from v2, you need to import the default styling for modals and tooltips.

The default styling is optional and we are using it to make prototyping with reactjs-popup easier.

If you are planning to create your own CSS for modals and tooltips, which is often the case, you don't need to import the default styling. Check the CSS styling section for more information.

import 'reactjs-popup/dist/index.css';

Control Popup

If you need to have more control over your component, we provide function as a child pattern to get access to close popup action.

const PopupExample = () => (
<Popup trigger={<button>Trigger</button>} position="top left">
{close => (
<div>
Content here
<a className="close" onClick={close}>
&times;
</a>
</div>
)}
</Popup>
);

More examples in Guides Section