@zohodesk/components/es/Responsive/RefWrapper.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { forwardRef, useCallback, Children, cloneElement } from 'react';
import PropTypes from 'prop-types';

function setRef(refFunc, value) {
  if (typeof refFunc === 'function') {
    refFunc(value);
  } else if (refFunc instanceof Object) {
    refFunc.current = value;
  }
}

const DOMRefWrapper = /*#__PURE__*/forwardRef((props, refFunc) => {
  const ele = Children.only(props.children);
  const {
    domRefKey = 'eleRef'
  } = props; // NOTE: need to  check for forward  Ref function, Because in Froward Ref case refKey is "ref"

  const refKey = typeof ele.type !== 'string' ? domRefKey : 'ref'; // const setAttribute = useCallback(node => {

  const eleRealRefFunc = ele.props[refKey];
  const setAttribute = useCallback(ref => {
    setRef(refFunc, ref);
    setRef(eleRealRefFunc, ref);
  }, [refFunc, eleRealRefFunc]); // let refKey = typeof ele.type === 'string' ? 'ref' : 'eleRef';

  let childProps = {
    [refKey]: setAttribute
  };
  return /*#__PURE__*/cloneElement(ele, childProps);
});
DOMRefWrapper.defaultProps = {
  domRefKey: 'eleRef'
};
DOMRefWrapper.propTypes = {
  domRefKey: PropTypes.any,
  children: PropTypes.any
};
export default DOMRefWrapper;