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>);

Custom Root

Starting from v2 you can customize where the popup is rendered on the page!

By default a div with id popup-root is appended to the very end of the body tag and the popup content is rendered inside, but if an element with this id already exists, this will be used instead.

This can be helpful when you need your popup to render inside of React's root element.

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

More examples in Guides Section