react-clone-referenced-element/cloneReferencedElement.js

Clones a React element while preserving its original ref

'use strict';

const React = require('react');

function cloneReferencedElement(element, config, ...children) {
  const cloneRef = config.ref;
  const originalRef = element.ref;
  if (originalRef == null || cloneRef == null) {
    return React.cloneElement(element, config, ...children);
  }

  if (typeof originalRef !== 'function') {
    if (__DEV__) {
      console.warn(
        `Cloning an element with a ref that will be overwritten because it is not a function. Use a composable callback ref instead. Ignoring ref:`,
        originalRef
      );
    }
    return React.cloneElement(element, config, ...children);
  }

  return React.cloneElement(
    element,
    {
      ...config,
      ref(component) {
        cloneRef(component);
        originalRef(component);
      },
    },
    ...children
  );
}

module.exports = cloneReferencedElement;