Popup Component

React component for Popup. Based on react-modal component

Installation

npm i @simpozio/popup

Usage

Basic

import React, {useState} from 'react';
import {Popup, PopupClose} from '@simpozio/popup';

const Component = () => {
  const [isOpen, setOpen] = useState();
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
        <button
          type="button"
          onClick={handleOpen}>
          Open Popup
        </button>
        <Popup isOpen={isOpen} closePopup={handleClose}>
            Popup Content
            <PopupClose onClick={closePopup} />
        </Popup>
    </>
  );
};

With built-in state

import {Popup, PopupState PopupClose} from '@simpozio/popup';

const Component = () => {
  return (
    <PopupState>
        (({isOpen, openPopup, closePopup}) => (
            <>
                <button
                  type="button"
                  onClick={openPopup}>
                  Open Popup
                </button>
                <Popup isOpen={isOpen} closePopup={closePopup}>
                    Popup Content
                    <PopupClose onClick={closePopup} />
                </Popup>
            </>
        )}
    </>
  );
};

Styling

Styled Component

Default styling with styled components:

import styled from 'styled-components';
import {Popup, PopupClose} from '@simpozio/popup';

const StyledClose = styled(PopupClose)`
  font-size: 0.6rem;
`;

const StyledPopup = styled(Popup)`
  .popup__overlay {
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    bottom: auto;
    width: 180px;
    height: 60px;
    background: none;
  }

  .popup__content {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    background-color: #000;
  }

  ${StyledClose} {
    top: 0;
    right: 0;
    color: #fff;
  }
`;

const Component = () => {
  return (
    <PopupState>
      {({isOpen, openPopup, closePopup}) => (
        <>
          <Button
            type="button"
            variant="outlined"
            color="secondary"
            onClick={openPopup}>
            Open Popup
          </Button>
          <StyledPopup isOpen={isOpen} closePopup={closePopup}>
            <StyledClose onClick={closePopup} />
            <Wrapper>Popup Content</Wrapper>
          </StyledPopup>
        </>
      )}
    </PopupState>
  )
}

Custom Styles

You can style Popup component via styles attribute by passing styled-component's interpolated string:

import {css} from 'styled-components';
import {Popup, PopupClose} from '@simpozio/popup';

const customStyles = css(
  ({Overlay, Content, Close, theme}) => css`
    ${Overlay} {
      background: none;
    }

    ${Content} {
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      color: ${theme.COLOR.INVERT};
      font-size: 2rem;
      background-color: ${theme.BACKGROUND.INVERT};
    }

    ${Close} {
      color: ${theme.COLOR.INVERT};
    }
  `
);

const Component = () => {
  return (
    <PopupState>
      {({isOpen, openPopup, closePopup}) => (
        <>
          <Button
            type="button"
            variant="outlined"
            color="secondary"
            onClick={openPopup}>
            Open Popup
          </Button>
          <Popup
            styles={customStyles}
            isOpen={isOpen}
            closePopup={closePopup}>
            <PopupClose onClick={closePopup} />
            <Wrapper>Popup Content</Wrapper>
          </Popup>
        </>
      )}
    </PopupState>
  )
}

Transition

You can change default popup transition for open/close by styling .ReactModal__Overlay--after-open and .ReactModal__Overlay--before-close classes, or OverlayAfterOpen and OverlayBeforeClose styled props on Popup component. Also you can change transition duration, by specifying closeDelay prop on Popup component. Don't forget to override default transition styles (opacity and visibility):

import {css} from 'styled-components';
import {Popup, PopupClose} from '@simpozio/popup';

const customStyles = css(
  ({Overlay, OverlayAfterOpen, OverlayBeforeClose}) => css`
    ${Overlay} {
        /*  overriding default transition styles */
        opacity: 1;
        visibility: visible;
        
        /* specifying new transition styles */
        transform: translateY(-1000px);
        transition: transform ease-in-out 1s;
    }

    ${OverlayAfterOpen} {
        /* specifying new transition styles */
        transform: translateY(0);
    }

    ${OverlayBeforeClose} {
        /*  overriding default transition styles */
        opacity: 1;
        visibility: visible;

        /* specifying new transition styles */
        transform: translateY(-1000px);
    }
  `
);

const Component = () => {
  return (
    <PopupState>
      {({isOpen, openPopup, closePopup}) => (
        <>
          <Button
            type="button"
            variant="outlined"
            color="secondary"
            onClick={openPopup}>
            Open Popup
          </Button>
          <Popup
            styles={customStyles}
            isOpen={isOpen}
            closeDelay={1000}
            closePopup={closePopup}>
            <PopupClose onClick={closePopup} />
            <Wrapper>Popup Content</Wrapper>
          </Popup>
        </>
      )}
    </PopupState>
  )
}

Props

Popup

• isOpen: boolean - boolean controlling popup state
• onOpen: function - onOpen callback called after popup is opened
• onClose: function - onClose callback called after popup is closed
• className: string - className string applied to portal element
• label: string - aria-label prop
• aria: object - object with ARIA attributes, such as: aria-label, aria-labelledby, aria-describedby etc. A complete list of ARIA attributes you can see in the ARIA specification
• closePopup: function - closing handler function, for handling close with ESC button and overlay click.
• appElement: string | HTMLElement - selector or HTML element of app root element. Prop for screenreaders, it needed for set aria-hidden for other page content, while modal is open.
• shouldCloseOnOverlayClick: boolean - prop specify should popup close on overlay click or not
• shouldCloseOnEsc: boolean - prop specify should popup close on ESC button pressed or not
• closeDelay: number - popup closing delay for transition

Development

Look simpozio-frontend-common library