react-ref-boundary
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

react-ref-boundary

React context for grouping react references by boundary in react dom, native and web. Ideal for group references for contains checks when using react portals.

Example 1

import { useRef as useReactRef, Fragment } from "react";
import { BoundaryProvider, useRef, useBoundary } from "react-ref-boundary";

function NonBoundaryComponent() {
  const ref = useReactRef < HTMLDivElement > null;
  return <div ref={ref} />;
}

function BoundaryComponent() {
  const ref = useBoundaryRef < HTMLDivElement > null;
  return <div ref={ref} />;
}

function BoundaryChecker() {
  const boundary = useBoundary();
  return (
    <button
      onClick={(event) => {
        if (
          !boundary.refs.some(
            (ref) => ref.current && ref.current.contains(event.target),
          )
        ) {
          // outside all of the references
        }
      }}
    />
  );
}

function BoundaryChecker({ getRefs }) {
  const boundary = useBoundary();
  getRefs(boundary.refs);
  return <Fragment />;
}

render(
  <BoundaryProvider>
    <BoundaryComponent />
    <NonBoundaryComponent />
    <BoundaryComponent />
    <BoundaryChecker />
  </BoundaryProvider>,
);

Documentation

API Docs

Package Sidebar

Install

npm i react-ref-boundary

Weekly Downloads

58

Version

1.0.1

License

MIT

Unpacked Size

21.8 kB

Total Files

16

Last publish

Collaborators

  • kmalakoff