@ryvora/react-use-is-hydrated/README.md

💧✅ Know when your React component is hydrated on the client. SSR mismatch be gone!

# use-is-hydrated 💧✅

Hello Hydration Hero! 🦸‍♀️

The `use-is-hydrated` hook is a utility to determine if your React component has finished "hydrating" on the client after being server-side rendered (SSR).

It's like a little sensor 🌡️ that tells you, "Okay, the JavaScript has fully taken over this part of the page!"

## Why is this useful?

Sometimes, you want to render something _only_ on the client-side, or behave differently after hydration to avoid SSR mismatches or to enable client-specific functionality (like browser APIs that aren't available during SSR).

- **Avoiding Mismatches:** Ensure UI consistency between server and client.
- **Client-Only Components:** Delay rendering of components that rely on browser environment.
- **Performance:** Defer non-critical client-side logic until after hydration.

## Basic Usage:

```tsx
import { useIsHydrated } from '@ryvora/react-use-is-hydrated'; // Hook name might vary
import React from 'react';

function MyComponent() {
  const isHydrated = useIsHydrated();

  if (!isHydrated) {
    // Render a placeholder or nothing during SSR and initial client render before hydration
    return <div>Loading client-specific content...</div>;
  }

  // This will only render after hydration on the client
  return (
    <div>
      <p>Welcome! The time is: {new Date().toLocaleTimeString()}</p>
      {/* Other client-side only components or logic */}
    </div>
  );
}

// Example of a component that should only render on the client
function ClientOnlyComponent() {
  const isHydrated = useIsHydrated();
  if (!isHydrated) return null;
  return <div>I only appear on the client! ✨</div>;
}
```

Keep your SSR smooth and your client-side enhancements well-timed! 🕰️🚀