From 69b6aec8725f9ad6db0b2a6c6f280c2a300a1f18 Mon Sep 17 00:00:00 2001
From: Travis Wimer <traviswimer@users.noreply.github.com>
Date: Wed, 15 Nov 2023 09:32:30 -0500
Subject: [PATCH] GH-6 Adds "use client" directive to prevent errors when using
 React Server Components (#7)

Closes #6
---
 README.md    | 8 ++++++++
 package.json | 2 +-
 src/index.ts | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

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.
+
 <h3 id="examples">Usage examples</h3>
 
 **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 } =