Overlay

A powerful and flexible overlay component for showing things over, and next to, other things.

const Tooltip = styled("div")`
  position: absolute;
`;

const Arrow = styled("div")`
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: -1;

  &::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
    background: #000;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
  }

  ${(p) =>
    ({
      left: "right: -4px;",
      right: "left: -4px;",
      top: "bottom: -4px;",
      bottom: "top: -4px;",
    }[p.placement])}
`;

const Body = styled("div")`
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  background-color: #000;
`;

const PLACEMENTS = ["left", "top", "right", "bottom"];

const initialSstate = {
  show: false,
  placement: null,
};

function reducer(state, [type, payload]) {
  switch (type) {
    case "placement":
      return { show: !!payload, placement: payload };
    case "hide":
      return { ...state, show: false, placement: null };
    default:
      return state;
  }
}

function OverlayExample() {
  const [{ show, placement }, dispatch] = useReducer(
    reducer,
    initialSstate
  );
  const triggerRef = useRef(null);
  const containerRef = useRef(null);

  const handleClick = () => {
    const nextPlacement =
      PLACEMENTS[PLACEMENTS.indexOf(placement) + 1];

    dispatch(["placement", nextPlacement]);
  };

  return (
    <div
      className="flex flex-col items-center"
      ref={containerRef}
    >
      <button
        type="button"
        className="btn mb-4"
        id="overlay-toggle"
        ref={triggerRef}
        onClick={handleClick}
      >
        I am an Overlay target
      </button>
      <p>Keep clicking to see the placement change.</p>

      <Overlay
        show={show}
        rootClose
        offset={[0, 10]}
        onHide={() => dispatch("hide")}
        placement={placement}
        container={containerRef}
        target={triggerRef}
      >
        {({ props, arrowProps, placement }) => (
          <Tooltip {...props} placement={placement}>
            <Arrow
              {...arrowProps}
              placement={placement}
              style={arrowProps.style}
            />
            <Body>
              I&rsquo;m placed to the{" "}
              <strong>{placement}</strong>
            </Body>
          </Tooltip>
        )}
      </Overlay>
    </div>
  );
}

<OverlayExample />;

const Tooltip = styled("div")`
  position: absolute;
`;
const Arrow = styled("div")`
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: -1;
  &::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
    background: #000;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
  }
  ${(p) =>
    ({
      left: "right: -4px;",
      right: "left: -4px;",
      top: "bottom: -4px;",
      bottom: "top: -4px;",
    }[p.placement])}
`;
const Body = styled("div")`
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  background-color: #000;
`;
const PLACEMENTS = ["left", "top", "right", "bottom"];
const initialSstate = {
  show: false,
  placement: null,
};
function reducer(state, [type, payload]) {
  switch (type) {
    case "placement":
      return { show: !!payload, placement: payload };
    case "hide":
      return { ...state, show: false, placement: null };
    default:
      return state;
  }
}
function OverlayExample() {
  const [{ show, placement }, dispatch] = useReducer(
    reducer,
    initialSstate
  );
  const triggerRef = useRef(null);
  const containerRef = useRef(null);
  const handleClick = () => {
    const nextPlacement =
      PLACEMENTS[PLACEMENTS.indexOf(placement) + 1];
    dispatch(["placement", nextPlacement]);
  };
  return (
    <div
      className="flex flex-col items-center"
      ref={containerRef}
    >
      <button
        type="button"
        className="btn mb-4"
        id="overlay-toggle"
        ref={triggerRef}
        onClick={handleClick}
      >
        I am an Overlay target
      </button>
      <p>Keep clicking to see the placement change.</p>
      <Overlay
        show={show}
        rootClose
        offset={[0, 10]}
        onHide={() => dispatch("hide")}
        placement={placement}
        container={containerRef}
        target={triggerRef}
      >
        {({ props, arrowProps, placement }) => (
          <Tooltip {...props} placement={placement}>
            <Arrow
              {...arrowProps}
              placement={placement}
              style={arrowProps.style}
            />
            <Body>
              I&rsquo;m placed to the{" "}
              <strong>{placement}</strong>
            </Body>
          </Tooltip>
        )}
      </Overlay>
    </div>
  );
}
<OverlayExample />;

API

import Overlay from 'react-overlays/Overlay'

Built on top of Popper.js, the overlay component is great for custom tooltip overlays.

childrenrequired

A render prop that returns an element to overlay and position. See the react-popper documentation for more info.

type:{Function ({ show: boolean, placement: Placement, update: () => void, forceUpdate: () => void, props: { ref: (?HTMLElement) => void, style: { [string]: string | number }, aria-labelledby: ?string [string]: string | number, }, arrowProps: { ref: (?HTMLElement) => void, style: { [string]: string | number }, [string]: string | number, }, }) => React.Element}

container

A DOM Element, Ref to an element, or function that returns either. The container will have the Portal children appended to it.

type:any

containerPadding

Control how much space there is between the edge of the boundary element and overlay. A convenience shortcut to setting popperConfig.modfiers.preventOverflow.padding

type:number

flip

Enables the Popper.js flip modifier, allowing the Overlay to automatically adjust it's placement in case of overlap with the viewport or toggle. Refer to the flip docs for more info

type:boolean

onEnter

Callback fired before the Overlay transitions in

type:function

onEntered

Callback fired after the Overlay finishes transitioning in

type:function

onEntering

Callback fired as the Overlay begins to transition in

type:function

onExit

Callback fired right before the Overlay transitions out

type:function

onExited

Callback fired after the Overlay finishes transitioning out

type:function

onExiting

Callback fired as the Overlay begins to transition out

type:function

onHide

A Callback fired by the Overlay when it wishes to be hidden.

required when rootClose is true.

type:func

placement

Specify where the overlay element is positioned in relation to the target element

type:placements

popperConfig

A set of popper options and props passed directly to react-popper's Popper component.

type:Object

rootClose

Specify whether the overlay should trigger onHide when the user clicks outside the overlay

type:boolean

rootCloseDisabled

Specify disabled for disable RootCloseWrapper

type:boolean

rootCloseEvent

Specify event for toggling overlay

type:'click''mousedown'

show

Set the visibility of the Overlay

type:boolean

target

A DOM Element, Ref to an element, or function that returns either. The target element is where the overlay is positioned relative to.

type:any

transition

A react-transition-group@2.0.0 <Transition/> component used to animate the overlay as it changes visibility.

type:elementType

Overlay

#API

#childrenrequired

#container

#containerPadding

#flip

#onEnter

#onEntered

#onEntering

#onExit

#onExited

#onExiting

#onHide

#placement

#popperConfig

#rootClose

#rootCloseDisabled

#rootCloseEvent

#show

#target

#transition

API

childrenrequired

container

containerPadding

flip

onEnter

onEntered

onEntering

onExit

onExited

onExiting

onHide

placement

popperConfig

rootClose

rootCloseDisabled

rootCloseEvent

show

target

transition