Nobody Prefers Margarine

    @simpozio/popup
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    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

    Install

    npm i @simpozio/popup

    DownloadsWeekly Downloads

    3

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    36.7 kB

    Total Files

    38

    Last publish

    Collaborators

    • karataev
    • lopachenok
    • davletbaev
    • basvasilich