Add documentation on how to use client-hooks and improve errors

[ottovw]

After running into a issue using client hooks and server rendering, @tylermcginnis referenced/explained (thanks!) why that error is necessary: #218 (comment)

It turns out, that happened to multiple users:

• useMediaQuery causes error when used with Nextjs (not server safe) #258
• Error: useLocalStorage is a client-only hook - thrown from a client component #254
• Error: useMediaQuery is a client-only hook #218

Therefore the proposal is to:

• add a structured docs block to every client hook in the docs (e.g. using the explanation of Tyler) on the website
• include the url to this explanation within the error message in the code
• mark client-hooks in the hook overview (maybe also sort?)

useHooks advertises "server-safe" which is a bit misleading. I acknowledge, that it was a user error due to not fully understanding server render. useHooks could make life much easier for the users. My initial experience was pretty frustrating. (Remember Apple's "You're holding it wrong")

Thanks for providing this library.

[jamesvclements]

Here's a utility component I wrote for client-only hooks:

"use client";

import { useIsClient } from "@uidotdev/usehooks";

const ClientOnly = ({
  children,
  placeholder,
}: {
  children: React.ReactNode;
  placeholder?: React.ReactNode;
}) => {
  const isClient = useIsClient();

  if (!isClient) {
    return placeholder || null;
  }

  return children;
};

export default ClientOnly;

Usage:

<ClientOnly
  placeholder={<div className="fixed inset-0 bg-black z-50" />}
>
  <Preloader video={home.video as VideoType} />
</ClientOnly>

[wayneschuller]

I support this suggestion.

What I find strange, if some of these hooks can ONLY really make sense on clients, why require the useIsClient hook or other wrappers?

Could not useLocalStorage hook incorporate isClient tests internally?