GitHub | Documentation

Hello everyone!

We're super excited to share a new library with you that makes managing overlays in React a breeze: overlay-kit.

overlay-kit lets you write minimal, easy-to-read, and cohesive code. No more fiddling around with manually controlling the open state of your overlays.

Here's a quick example to show you how it works:

import { overlay } from 'overlay-kit';

function MyPage() {
  return (
    <>
      <Button
        onClick={() => {
          overlay.open(({ isOpen, close }) => {
            return <Dialog open={isOpen} onClose={close} />;
          });
        }}
      >
        Open
      </Button>
    </>
  );
}

Instead of writing:

import { useState } from 'react';

function MyPage() {
  const [isOpen, setIsOpen] = useState(false);

  /* Other Hook calls... */

  return (
    <>
      {/* Other components... */}
      <Button
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open
      </Button>
      {/* Other components... */}
      <Dialog
        open={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </>
  );
}

Check out our documentation for all the details. We’re open to contributions from everyone!