Go to file
2019-04-06 17:55:15 +02:00
example Layout the popup after initial render. 2019-04-06 17:55:15 +02:00
src Layout the popup after initial render. 2019-04-06 17:55:15 +02:00
tests Layout the popup after initial render. 2019-04-06 17:55:15 +02:00
.babelrc Initial commit. 2019-02-13 21:10:40 +01:00
.eslintrc.json Initial commit. 2019-02-13 21:10:40 +01:00
.gitignore Initial commit. 2019-02-13 21:10:40 +01:00
Gruntfile.js Initial commit. 2019-02-13 21:10:40 +01:00
karma.conf.js Initial commit. 2019-02-13 21:10:40 +01:00
LICENSE Initial commit. 2019-02-13 21:10:40 +01:00
NOTICE.txt Initial commit. 2019-02-13 21:10:40 +01:00
package.defs.js Initial commit. 2019-02-13 21:10:40 +01:00
package.json Layout the popup after initial render. 2019-04-06 17:55:15 +02:00
README.md Initial commit. 2019-02-13 21:10:40 +01:00
webpack.dist.js Initial commit. 2019-02-13 21:10:40 +01:00
webpack.example.js Initial commit. 2019-02-13 21:10:40 +01:00
yarn.lock Initial commit. 2019-02-13 21:10:40 +01:00


React Custom Popup is a React component for simply building custom popups and modals.


react-custom-popup requires React 16.4.0 or later and ReactDOM 16.4.0 or later.

yarn add --dev react-custom-popup

This assumes that youre using yarn package manager with a module bundler like Webpack.


The following snippet shows the example usage of react-custom-popup.

import React from 'react';
import Popup from 'react-custom-popup';

class App extends React.Component {
  constructor (props) {

    this.refButton = React.createRef();

    this.state = {
      popupVisible: false
  onShowPopupButtonClick (event) {

    this.setState({popupVisible: true});
  onHidePopup (event) {

    this.setState({popupVisible: false});
  render () {
    return (
          Show Popup

            <h2>Hello, I'm a popup!</h2>
              <button onClick={this.onHidePopup}>Close</button>


react-custom-popup includes CSS file that provides generic styles for the popup. It's recommended to include it in your project's styles.

You can customize aspects of the popup's layout by passing a custom CSS class using the className prop.



This is the custom popup component. It renders the popup in a React portal.

Example DOM structure rendered by the component:

<div className="bthlabs-react-custom-popup">
    <div className="bthlabs-rcp-overlay" />
    <div className="bthlabs-rcp-inner">
      <!-- Children will be rendered here -->

The div.bthlabs-rcp-inner will be positioned according to the anchor. If anchor isn't passed, the position will default to left: 0px; top: 0px;, unless modified by onLayout prop.


  • anchor (React ref, optional) - a ref to an anchor element which will be used to position the inner layer.
  • className (string, optional) - custom CSS class.
  • hideOverlay (boolean, optional) - allows the wrapping component to hide the overlay. Defaults to false.
  • visible (boolean, required) - specifies whether the popup is visible.
  • onLayout (function, optional) - callback which allows the wrapping component to modify the inner layer's layout. Read below for more information.
  • onOverlayClick (function, optional) - onClick handler for the div.bthlabs-rcp-overlay element.

The onLayout callback

The onLayout prop allows the wrapping component to modify the inner layer's layout. If specified, it should accept an array of integers ([<left>, <top>]) and return an array of either two or more integers ([<left>, <top>, <width>, <height>]). The width and height fields can be omitted.

Example onLayout callback:

const onLayout = (layout) => {
  return [
    layout[0] + 10, // left
    layout[1] + 20, // top
    100,            // width
    200             // height

This function would shift the inner layer by 10px to the right and 20px to the bottom and set its size to 100px of width and 200px of height.


To bootstrap the development environment, clone the repo and run npm install from the root directory.

The package.json file provides the following scripts:

  • build - builds the library modules,
  • build:example - builds the example project,
  • lint - performs an eslint run over the source code,
  • test - performs a single test run,
  • test:watch - starts karma with watcher.

NOTE: Tests require Chromium to be installed and available in the path. Consult karma-chrome-launcher docs for more info.


If you think you found a bug or want to send a patch, feel free to contact me through e-mail.

If you're sending a patch, make sure it passes eslint checks and is tested.


react-custom-popup is developed by Tomek Wójcik.


react-custom-popup is licensed under the MIT License.