Using component children

[Arkellys]

The current way to use a component children with tippy is to either use forwardRef or to wrap the component in a span tag.

However, I was wondering if by any chance there was another way to make it work ?

I just updated to the latest version of tippy and putting forwardRef everywhere is not maintainable. I would like to keep the accessibility so the span is also a problem (and it break the design sometimes as well). I don't use styled components either.

[atomiks]

This was a consequence of removing findDOMNode(), which had to be done 😞

I'm pretty sure React will move towards putting ref as a normal prop. So you could simply do:

function Link(props) {
  return <a {...props} />
}

and it would pass the ref normally. forwardRef is an awkward stepping stone unfortunately.

[Arkellys]

Oh... so there is no way we can do again:

<Tooltip content="test">
   <CustomComponent />
</Tooltip>

as in the first version (without using a function)?

[atomiks]

Do you mean a class component? You'll still need forwardRef, but passing the ref as a prop called innerRef and then forwarding that to the ref prop on the node in the render() method.

// CustomComponent.js
class CustomComponent extends Component {
  render() {
    return <button ref={this.props.innerRef} />
  }
}

export default forwardRef((props, ref) => {
  return <CustomComponent {...props} innerRef={ref} />
})

// ----------
import CustomComponent from './CustomComponent'

<Tooltip content="test">
  <CustomComponent />
</Tooltip>

v1 was using findDOMNode() to find the actual DOM element associated with <CustomComponent /> in that case. But that's deprecated behavior now (in strict mode), which is not recommended. refs are the recommended way to select DOM nodes, which for now requires this elaborate song and dance.

[Arkellys]

Oh ok I see, thank you for the explanation, this change is understandable then!
Yes I meant a class component, I have just tried your solution and it work well!

Thank you for your help, and for this great library. 😃

[sidx1024]

I don't like these solutions where you need to use forwardRef and make things complicated. So I've made a wrapper that gets the reference to your DOM element by sibling reference. Sharing it here:

/**
 * A tooltip component which does not wrap the child component in a <span> element and does not require to passing a forwardRef.
 * It gets the child's reference by inserting an adjacent element.
 * This adjacent element is removed from the DOM when the sibling's ref is available.
 *
 * @param options
 * @param children
 * @returns {JSX.Element}
 * @constructor
 */
export function Tooltip({ options, children }) {
  /**
   * Reference for the temporary span element.
   */
  const spanRef = useRef(null);
  const [childRef, setChildRef] = useState(null);

  /**
   * Mount the temporary span element.
   * retrieve and store the target element's reference.
   */
  useEffect(() => {
    if (spanRef.current) {
      setChildRef(spanRef.current.previousElementSibling);
    }
    return () => setChildRef(null);
  }, []);

  return (
    <React.Fragment>
      {children}
      {childRef ? (
        <Tippy {...options} reference={childRef} />
      ) : (
        <span ref={spanRef} style={{ display: "none" }} />
      )}
    </React.Fragment>
  );
}

Tooltip.propTypes = {
  options: PropTypes.object,
  /**
   * Custom PropType to check for a single child.
   */
  children: (props, propName, componentName) => {
    const prop = props[propName];
    if (React.Children.count(prop) > 1) {
      return new Error(`${componentName} cannot have multiple children.`);
    }
    if (!React.isValidElement(prop)) {
      return new Error(`${componentName} has a child which is not a DOM element.`);
    }
  },
};

Tooltip.defaultProps = {
  options: {},
  children: null,
};

// Usage
function MyComponent() {
  return (
    <Tooltip content="Click to submit">
      <Button>Submit</Button>
    </Tooltip>
  );
}

The only thing you need to make sure is to have only one child component inside <Tooltip> to make it work.

[alicerocheman]

@sidx1024
You're missing reference={childRef} on your Tippy component