How to use @reach/rect - 9 common examples

DEBUG_STYLE
} = {}) {
  const id = useId(idProp);

  const [isVisible, setIsVisible] = useState(
    DEBUG_STYLE
      ? true
      : id === null
      ? false
      : context.id === id && state === VISIBLE
  );

  // hopefully they always pass a ref if they ever pass one
  const ownRef = useRef();
  const ref = useForkedRef(forwardedRef, ownRef);
  const triggerRect = useRect(ownRef, isVisible);

  useEffect(() => {
    return subscribe(() => {
      if (
        context.id === id &&
        (state === VISIBLE || state === LEAVING_VISIBLE)
      ) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    });
  }, [id]);

  useEffect(() => checkStyles("tooltip"));

function ExampleAnimatedTab(props) {
  const { isSelected } = props;

  // measure the size of our element, only listen to rect if active
  const ref = useRef();
  const rect = useRect(ref, isSelected);

  // get the style changing function from context
  const setActiveRect = useContext(AnimatedContext);

  // callup to set styles whenever we're active
  useLayoutEffect(() => {
    if (isSelected) {
      setActiveRect(rect);
    }
  }, [isSelected, rect, setActiveRect]);

  return (
    
  );
}

function Tab(props: TabProps) {
  // @reach/tabs provides an `isSelected` prop
  // We could also useContext to read it manually
  const { isSelected } = props;

  // Each tab measures itself
  const ref = useRef();
  const rect = useRect(ref, isSelected);

  // and calls up to the parent when it becomes selected
  // we useLayoutEffect to avoid flicker
  const setSelectedRect = useContext(AnimatedContext);
  useLayoutEffect(() => {
    if (isSelected) setSelectedRect(rect);
  }, [isSelected, rect, setSelectedRect]);

  return ;
}

function Tabs(props: TabsProps) {
  // Store the position of the selected Tab so we can animate the "active" bar to its position
  const [selectedRect, setSelectedRect] = useState(null);

  // Create a ref of the parent element so we can measure the relative "left" for the bar for the child Tab's
  const tabsRef = useRef();
  const tabsRect = useRect(tabsRef);

  const tabLabels = props.children[0];
  const tabContent = props.children[1];

  return (
    
      
        {tabLabels}

        <div style="{{"></div>

export function Example() {
  const ref = useRef();
  const rect = useRect(ref);
  return (
    <div>
      <pre>{JSON.stringify(rect, null, 2)}</pre>
      <textarea>      &lt;span
        ref={ref}
        contentEditable
        dangerouslySetInnerHTML={{
          __html: "Observing my rect, I'm also editable"
        }}
        style={{
          display: "inline-block",
          padding: 10,
          margin: 10,
          border: "solid 1px",
          background: "#f0f0f0"</textarea></div>

export default function Expandable(props: Props) {
  const [expanded, setExpanded] = useState(false);
  const { children } = props;
  const ref = useRef();
  const rect = useRect(ref);

  function handleClick() {
    setExpanded(!expanded);
  }

  return (
    <div>
      {rect &amp;&amp; rect.height &gt; COLLAPSED_HEIGHT ? (
        <div>
          <div>
            {children}</div></div></div>

{
    label,
    ariaLabel,
    position = positionDefault,
    isVisible,
    id,
    triggerRect,
    style,
    ...rest
  },
  forwardedRef
) {
  const useAriaLabel = ariaLabel != null;
  const ownRef = useRef(null);
  const ref = useForkedRef(forwardedRef, ownRef);
  const tooltipRect = useRect(ownRef, isVisible);
  return (
    
      <div style="{{" id="{useAriaLabel" role="{useAriaLabel" data-reach-tooltip="">
      {useAriaLabel &amp;&amp; (
        </div>

const PopoverImpl = forwardRef(function PopoverImpl(
  { targetRef, position = positionDefault, style, ...rest },
  forwardedRef
) {
  const popoverRef = useRef();
  const popoverRect = useRect(popoverRef);
  const targetRect = useRect(targetRef);
  const ref = useForkedRef(popoverRef, forwardedRef);

  useSimulateTabNavigationForReactTree(targetRef, popoverRef);

  return (
    <div style="{{" data-reach-popover="">
  );</div>

const PopoverImpl = forwardRef(function PopoverImpl(
  { targetRef, position = positionDefault, style, ...rest },
  forwardedRef
) {
  const popoverRef = useRef();
  const popoverRect = useRect(popoverRef);
  const targetRect = useRect(targetRef);
  const ref = useForkedRef(popoverRef, forwardedRef);

  useSimulateTabNavigationForReactTree(targetRef, popoverRef);

  return (
    <div style="{{" data-reach-popover=""></div>