creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.51k stars 306 forks source link

Tooltip component is not working with React Icons #668

Open SkipTheDragon opened 2 months ago

SkipTheDragon commented 2 months ago

Snippet that gives me the error:

`

`

Imported components:

import {FaPowerOff} from "react-icons/fa6";
import {Tooltip} from "@material-tailwind/react";

Error i get:

chunk-YEAVKOZD.js?v=ae334181:521 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of 'MaterialTailwind.Tooltip'.
    at BiPowerOff
    at http://localhost:5173/build/node_modules/.vite/deps/@material-tailwind_react.js?v=ae334181:24754:25
    at div
    at div
    at div
    at nav
    at http://localhost:5173/build/node_modules/.vite/deps/@material-tailwind_react.js?v=ae334181:22383:28
    at NavbarWithSimpleLinks (http://localhost:5173/build/assets/src/components/NavBar/Navbar.tsx?t=1713282077806:30:27)
    at QueryClientProvider (http://localhost:5173/build/node_modules/.vite/deps/chunk-5YNK6PBE.js?v=ae334181:2501:3)
    at ThirdwebProvider (http://localhost:5173/build/node_modules/.vite/deps/thirdweb_react.js?v=ae334181:8349:53)
    at ThemeProvider (http://localhost:5173/build/node_modules/.vite/deps/@material-tailwind_react.js?v=ae334181:6666:32)
    at Wrapper (http://localhost:5173/build/assets/src/Wrapper.tsx?t=1713282077806:26:35)

Temporary solution I found:

// src/Icon.tsx
import {ClassAttributes, createElement, forwardRef, InputHTMLAttributes} from "react";
import {IconBaseProps} from "react-icons";

type Icon = {
    as: string,
}

export default forwardRef((props: Icon & InputHTMLAttributes<HTMLInputElement> & IconBaseProps & ClassAttributes<HTMLInputElement> | null, ref) => {
    const childProps = {...props, as: undefined}

    if (!(props) || props.as === undefined) {
        throw new Error('Icon component requires an "as" prop')
    }

    return (
        <span ref={ref}>
                {createElement(props.as, childProps)}
        </span>
    )
})

React Icons package link: https://react-icons.github.io/react-icons/

If im doing something wrong or if I missed this being covered inside the documentation please let me know :)