react-display-overlay

Display custom overlay elements on a custom background. Functionality is included such that overlay elements resize with the background.

See a more complex example incorporating react-player and styled-components here (https://jensenrice.com/) and the source code here (https://github.com/jensenrrr/rice-site).

Getting Started

Install Package

npm i react-display-overlay

Basic Example (to obtain the result shown above)

Declare Overlay Elements

Relative size and position are numbers you feed to determine the percentage size and position of the elements relative to the background. xRelative and yRelative corelate to the left and top respectively, so a yRelative of .4 means 40% from the top and a xRelative of .2 means 20% from the left.

//Element to be overlaid
const BlackBox: React.FC<AbsolutePositionAndSize> = (
  absolutePositionAndSize
) => (
  <div
    style={{
      ...absolutePositionAndSizeToCSS(absolutePositionAndSize),
      backgroundColor: "black",
    }}
  ></div>
);

//create array of elements to be overlaid
const overlaidElements = () => {
  const boxOne: OverlaidElementInput = {
    render: ({ absolutePositionAndSize }: OverlayElementRenderProps) => (
      <BlackBox {...absolutePositionAndSize} />
    ),
    relativePositionAndSize: {
      yRelative: 0.4,
      xRelative: 0.2,
      widthScale: 0.2,
      heightScale: 0.2,
    },
  };

  const boxTwo: OverlaidElementInput = {
    render: ({ absolutePositionAndSize }: OverlayElementRenderProps) => (
      <BlackBox {...absolutePositionAndSize} />
    ),
    relativePositionAndSize: {
      yRelative: 0.4,
      xRelative: 0.6,
      widthScale: 0.2,
      heightScale: 0.2,
    },
  };

Import Background Image and use DisplayOverlay Component

//import your background image (see below for help with custom or video backgrounds)
import backgroundPic from "./demoBackground.jpg";
import { overlaidElements } from "./overlaidElements";

    function App() {
      return (
        <div>
          <DisplayOverlay
            background={backgroundPic}
            overlaidElements={overlaidElements()}
          />
        </div>
      );
    }

export default App;

Custom Background / Background Videos

react-display-overlay is a lightweight package and contains no video display functionality, however, you can create an HTML element and pass that in as the background element. Below is an example of using react-player with react-display-overlay for video background.

Create the Custom Background Component

import ReactPlayer from "react-player";
import { OverlayBackgroundRenderProps } from "react-display-overlay";

const vid = "videos/SandbookHighBitRate.mp4";

const background = {
  render: ({
    backgroundRef,
    onBackgroundLoad,
    backgroundProps,
  }: OverlayBackgroundRenderProps) => (
    <div
      ref={backgroundRef}
      style={{ position: "relative", paddingTop: "56.25%", maxHeight: "2000" }}
    >
      <ReactPlayer
        url={vid}
        muted
        playing
        loop
        onStart={onBackgroundLoad}
        width="100%"
        height="100%"
        style={{ position: "absolute", top: 0, left: 0 }}
      />
    </div>
  ),
};

And Use the DisplayOverlay Component

const OverlaidVideo = () => {
  return (
    <div>
      <DisplayOverlay
        background={sandbookBackground}
        overlaidElements={overlaidImages}
      />
    </div>
  );
};

export default OverlaidVideo;