react-icons icon indicating copy to clipboard operation
react-icons copied to clipboard

Published 20 hours ago • verified publisher icon react-icons

Use `forwardRef` with `IconBase`

Open with-heart opened this issue 5 years ago • 15 comments

Is your feature request related to a problem? Please describe.

Chakra UI provides a Tooltip component that displays a tooltip when the component's children are hovered. In order to make this functionality work, we depend on the outermost child of Tooltip accepting a ref. Since IconBase does not forward refs, we are unable to make Tooltip work correctly if the outermost child is a react-icons icon.

See chakra-ui/chakra-ui#683 for a related issue on our end.

Describe the solution you'd like

Integrate React.forwardRef into IconBase so that icons generated by react-icons can accept a ref, increasing their flexibility and reusability.

See https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components for more details.

Describe alternatives you've considered

The only solution we have for our users is that they should wrap their react-icons icons with a component that forwards refs if they would like to wrap the icon with Tooltip.

Additional context

This would be a breaking change. https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers

with-heart avatar Jul 08 '20 11:07 with-heart

Really need this. Please consider it

yf-hk avatar Aug 23 '23 18:08 yf-hk

Bumping this issue. Would be nice to have this.

divx-alisson-ninomiya avatar Sep 01 '23 06:09 divx-alisson-ninomiya

been 3 years and still no fix, crazy

Duality1k avatar Sep 21 '23 09:09 Duality1k

@KeUnstackDetachProcess if someone was to reimplement #367 (it's 3 years old at this point) and address the concerns in the PR comments, I'm sure @kamijin-fanta would be open to accepting the change. Just need someone to champion the change.

with-heart avatar Sep 21 '23 21:09 with-heart

would be really nice to have this

wuifdesign avatar Oct 10 '23 09:10 wuifdesign

Just found out I have use case for using the motion HOC from framer-motion. Would love to see a ref that's passed to the svg itself.

DamSenViet avatar Oct 18 '23 03:10 DamSenViet

I've created a PR that should do the trick.

fauri13 avatar Jan 11 '24 07:01 fauri13

I may provide an API to add wrapper elements in the future. #719 Are the props to be added "innerRef" which always exposes a reference to the SVG element or "ref" which exposes a reference to the top level element?

kamijin-fanta avatar Jan 16 '24 02:01 kamijin-fanta

I may provide an API to add wrapper elements in the future. #719 Are the props to be added "innerRef" which always exposes a reference to the SVG element or "ref" which exposes a reference to the top level element?

In my PR, it forwards the ref using React.forwardRef, so it exposes the "ref" prop correctly.

fauri13 avatar Jan 16 '24 07:01 fauri13

Had a chance to look at fauri's PR. The ref is set up to the svg element inside the IconBase.

DamSenViet avatar Jan 16 '24 14:01 DamSenViet

Can't believe this wasn't in here from the start.

However I think this will no longer be a problem with React 19, because the ref should automatically be forwarded (assuming all other props are passed e.g. {...props}).

vincerubinetti avatar May 01 '24 16:05 vincerubinetti

@kamijin-fanta What are we waiting to fix this?

#367 Is stuck in the build step #897 Adds ref (what is the issue)? #719 Is about a wrapper

Would you tell us what is the current status for this issue, please?

jpenna avatar Oct 21 '24 22:10 jpenna