#mergeRefs

import { mergeRefs, usePosition } from '@hitechline/reactools';
import { useRef } from 'react';

const Component = () => {
  const myRef = useRef();
  const { ref, ...position } = usePosition();

  return <div ref={mergeRefs([ref, myRef])}>Component</div>;
};

import { mergeRefs, useOutClick } from '@hitechline/reactools';
import { useRef, useEffect } from 'react';

const Component = ({ asRef }) => {
  const { ref, addListener, removeListener } = useOutClick();

  useEffect(() => {
    addListener(() => {
      //
    });
  }, []);

  return <div ref={mergeRefs([ref, asRef])}>Component</div>;
};

import { mergeRefs, useOutClick } from '@hitechline/reactools';
import { useRef, forwardRef } from 'react';

const Component = forwardRef((props, ref) => {
  const { addListener, removeListener, ref: outClickRef } = useOutClick();

  useEffect(() => {
    addListener(() => {
      //
    });
  }, []);

  return (
    <div ref={mergeRefs([ref, outClickRef])} {...props}>
      Component
    </div>
  );
});