@ciceksepeti/cui-popover

Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

Installing

Using Npm:

$ npm install @ciceksepeti/cui-popover

Using Yarn:

$ yarn add @ciceksepeti/cui-popover

Example

import React, { useRef, useState } from "react";
import Popover from "@ciceksepeti/cui-popover";

function Demo() {
  const targetRef = useRef();
  const [open, setOpen] = useState();

  return (
    <div>
      <button ref={targetRef} setOpen={() => setOpen(!open)}>
        Toggle Popover
      </button>
      {open && (
        <Popover targetRef={targetRef}>
          Aliqua consectetur non ut id nostrud sit ipsum consequat officia
        </Popover>
      )}
    </div>
  );
}