Overlay demos with different configs

Default overlay

Renders an overlay/modal with default configuration


import React, { useState } from "react";
import Overlay from "react-overlay-component";

const Overlay = () => {
    const [expand, setExpand] = useState(false);

    const [isOpen, setOverlay] = useState(false);

    const closeOverlay = () => setOverlay(false);

    const configs = {};

    return (
        <section>
            <h3>default overlay</h3>
            <p>Renders an overlay/modal with default configuration</p>
            <button
                className="primary"
                onClick={() => {
                    setOverlay(true);
                }}
            >
        open modal
            </button>

            <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}>
                <h3>Sample header</h3>
                <p>text content</p>

            </Overlay>

            <button onClick={() => setExpand(!expand)} className={"button-code"}>
                {expand ? "Hide" : "Show"} Source code
            </button>
            <div className={["expandable-section", expand ? "expand" : "close"].join(" ")}>
                <pre className="line-numbers">
                    <code className="language-jsx">{normalOverlayhtmlcode}</code>
                </pre>
            </div>
        </section>
    );
};

Overlay with no animation

Renders an overlay/modal with no animate


import React, { useState } from "react";
import Overlay from "react-overlay-component";

const Overlay = () => {
    const [expand, setExpand] = useState(false);

    const [isOpen, setOverlay] = useState(false);

    const closeOverlay = () => setOverlay(false);

    const configs = {
        animate: false
    };

    return (
        <section>
            <h3>default overlay</h3>
            <p>Renders an overlay/modal with default configuration</p>
            <button
                className="primary"
                onClick={() => {
                    setOverlay(true);
                }}
            >
        open modal
            </button>

            <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}>
                <h3>Sample header</h3>
                <p>text content</p>
            </Overlay>

            <button onClick={() => setExpand(!expand)} className={"button-code"}>
                {expand ? "Hide" : "Show"} Source code
            </button>
            <div className={["expandable-section", expand ? "expand" : "close"].join(" ")}>
                <pre className="line-numbers">
                    <code className="language-jsx">{normalOverlayhtmlcode}</code>
                </pre>
            </div>
        </section>
    );
};

Undismissable Overlay

Renders an overlay/modal that ignores click on backdrop and ESC key press.

Can be closed programmatically.


import React, { useState } from "react";
import Overlay from "react-overlay-component";

const Overlay = () => {
    const [expand, setExpand] = useState(false);

    const [isOpen, setOverlay] = useState(false);

    const closeOverlay = () => setOverlay(false);

    const configs = {
        animate: true,
        clickDismiss: false,
        escapeDismiss: false,
    };

    return (
        <section>
            <h3>default overlay</h3>
            <p>Renders an overlay/modal with default configuration</p>
            <button
                className="primary"
                onClick={() => {
                    setOverlay(true);
                }}
            >
                open modal
            </button>

            <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}>
                <h3>Sample header</h3>
                <p>text content</p>
            </Overlay>

            <button onClick={() => setExpand(!expand)} className={"button-code"}>
                {expand ? "Hide" : "Show"} Source code
            </button>
            <div className={["expandable-section", expand ? "expand" : "close"].join(" ")}>
                <pre className="line-numbers">
                    <code className="language-jsx">{normalOverlayhtmlcode}</code>
                </pre>
            </div>
        </section>
    );
};

Undismissable custom Overlay

Same as previous overlay with focus outline and close button.


import React, { useState } from "react";
import Overlay from "react-overlay-component";

const Overlay = () => {
    const [expand, setExpand] = useState(false);

    const [isOpen, setOverlay] = useState(false);

    const closeOverlay = () => setOverlay(false);

    const configs = {
        animate: true,
        clickDismiss: false,
        escapeDismiss: false,
        showCloseIcon: false,
        focusOutline: true,
    };

    return (
        <section>
            <h3>default overlay</h3>
            <p>Renders an overlay/modal with default configuration</p>
            <button
                className="primary"
                onClick={() => {
                    setOverlay(true);
                }}
            >
                open modal
            </button>

            <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}>
                <div style={{ textAlign: "center" }}>
                    <h3>Dialog box with custom content</h3>
                    <p>sample text</p>
                    <p>
            Nullam cursus fermentum elit eu convallis. Donec non turpis eu dolor tristique mollis
            nec vel mauris. Suspendisse rutrum, odio sed tristique ultricies, ante urna egestas
            neque, non ornare ipsum erat eu felis. Proin nec enim sodales sem ullamcorper egestas.
            Duis quis sagittis ante. Morbi nibh ex, lacinia ac convallis eu, sagittis ut turpis.
            Etiam ultrices viverra diam, et dignissim dolor commodo rhoncus. Aenean euismod lacus eu
            sapien dictum, a efficitur mi condimentum. Mauris non enim lacus. Nulla tempor et dolor
            et fringilla. Praesent tempor sapien et porttitor aliquam. Phasellus vulputate libero
            volutpat, sagittis eros quis, eleifend lacus. Etiam eget metus quis tortor egestas
            lacinia.
                    </p>
                </div>

                <button
                    className="danger"
                    onClick={() => {
                        setOverlay(false);
                    }}
                >
                    close
                </button>
            </Overlay>

            <button onClick={() => setExpand(!expand)} className={"button-code"}>
                {expand ? "Hide" : "Show"} Source code
            </button>
            <div className={["expandable-section", expand ? "expand" : "close"].join(" ")}>
                <pre className="line-numbers">
                    <code className="language-jsx">{normalOverlayhtmlcode}</code>
                </pre>
            </div>
        </section>
    );
};

Overlay inside an overlay


import React, { useState } from "react";
import Overlay from "react-overlay-component";

const OverlayWithNested = () => {
  const [expand, setExpand] = useState(false)

  const [isOpen, setOverlay] = useState(false)

  const closeOverlay = () => setOverlay(false)

  const configs = {
    animate: true,
    showCloseIcon: false,
    focusOutline: true,
  }

  const [isOpen1, setOverlay1] = useState(false)

  const closeOverlay1 = () => setOverlay1(false)

  const configs1 = {}

  return (
    <section>
      <button
        className="primary"
        onClick={() => {
          setOverlay(true)
        }}
      >
        open modal
      </button>

      <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}>
        <Overlay configs={configs1} isOpen={isOpen1} closeOverlay={closeOverlay1}>
          <h3>Sample header</h3>
          <p>text content</p>
        </Overlay>
        <div style={{ textAlign: "center" }}>
          <h3>Dialog box with custom content</h3>
          <button
            className="primary"
            onClick={() => {
              setOverlay1(true)
            }}
          >
            open modal
          </button>
          <p>sample text</p>
          <p>
            Nullam cursus fermentum elit eu convallis. Donec non turpis eu dolor tristique mollis
            nec vel mauris. Suspendisse rutrum, odio sed tristique ultricies, ante urna egestas
            neque, non ornare ipsum erat eu felis. Proin nec enim sodales sem ullamcorper egestas.
            Duis quis sagittis ante. Morbi nibh ex, lacinia ac convallis eu, sagittis ut turpis.
            Etiam ultrices viverra diam, et dignissim dolor commodo rhoncus. Aenean euismod lacus eu
            sapien dictum, a efficitur mi condimentum. Mauris non enim lacus. Nulla tempor et dolor
            et fringilla. Praesent tempor sapien et porttitor aliquam. Phasellus vulputate libero
            volutpat, sagittis eros quis, eleifend lacus. Etiam eget metus quis tortor egestas
            lacinia.
          </p>
        </div>

        <button
          className="danger"
          onClick={() => {
            setOverlay(false)
          }}
        >
          close
        </button>
      </Overlay>
    </section>
  )
}