Tooltip - NextJS 13 #1782
-
|
Hello :) With NextJS 13 introducing their new app directory (currently in beta), as by default layouts and pages are SSR, I was wondering how Radix Tooltip provider can be used globally over the app? If for example, I wrap in my root layout body my childrens with <Tooltip.Provider> component, I get an error from Next saying that it has to be a client side component as it uses useEffect. import "styles/globals.css";
import * as Tooltip from "@radix-ui/react-tooltip";
interface RootLayoutProps {
children: React.ReactNode;
}
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en">
<head />
<body className="body">
<Tooltip.Provider>
{children}
</Tooltip.Provider>
</body>
</html>
);
}Thanks a lot. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Hey @louislefebvre, we've yet to add out of the box support for the app directory, in the meantime I'd suggest following the guidance provided in the official next docs as relates to third party packages. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for your reply! |
Beta Was this translation helpful? Give feedback.
-
|
…so what it says in the docs is not really true then?
then maybe it should say …(if you wrap it in a "use client" directive, so that it doesn't render on the server…) |
Beta Was this translation helpful? Give feedback.
-
SSR is not the same as RSC. That page is accurate with regards to SSR, though I agree some additional guidances specific to RSC would be helpful. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I see. So Radix is not a good match for my project then? I thought static-ish components like Avatar etc could be used in server components since they don't really (in my head) require client state. Do you know of any good component library that only rely on props and work in RSC's |
Beta Was this translation helpful? Give feedback.
Hey @louislefebvre, we've yet to add out of the box support for the app directory, in the meantime I'd suggest following the guidance provided in the official next docs as relates to third party packages.