Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip component is not working with React Icons #668

Open
SkipTheDragon opened this issue Apr 16, 2024 · 0 comments
Open

Tooltip component is not working with React Icons #668

SkipTheDragon opened this issue Apr 16, 2024 · 0 comments

Comments

@SkipTheDragon
Copy link

Snippet that gives me the error:

<Tooltip placement="bottom" content="Disconnect"> <BiPowerOff/> </Tooltip>

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant