0.1.23 • Published 4 months ago
react-ref-boundary v0.1.23
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
0.1.20
6 months ago
0.1.21
6 months ago
0.1.10
6 months ago
0.1.23
4 months ago
0.1.12
6 months ago
0.1.13
6 months ago
0.1.14
6 months ago
0.1.15
6 months ago
0.1.16
6 months ago
0.1.8
6 months ago
0.1.17
6 months ago
0.1.7
6 months ago
0.1.18
6 months ago
0.1.19
6 months ago
0.1.9
6 months ago
0.1.6
6 months ago
0.1.4
1 year ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago