diff --git a/README.md b/README.md index b93fe48..c6bacd7 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,14 @@ const { } = require("react-hydration-provider"); ``` +### Usage with Server Components + +_Requires `react-hydration-provider` version 2.1.0 or later_ + +If you are using [React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components), you should be able to use `HydrationProvider` and it's corresponding hooks/components without any changes. + +If you are using the standalone `useComponentHydrated` hook, you will need to include the [`"use client";`](https://react.dev/reference/react/use-client) directive in any component that uses it. +

Usage examples

**Basic Example** diff --git a/package.json b/package.json index 46dfd86..7b0dcaf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-hydration-provider", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "type": "module", "description": "React tools for controlling what your app renders before and after app hydration.", diff --git a/src/index.ts b/src/index.ts index 6c7d700..6e3398a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ +"use client"; import createHydration, { useComponentHydrated } from "./createHydration.js"; const { HydrationContext, HydrationProvider, useHydrated, Server, Client } =