more docs

packages/react-server/README.md

@@ -101,8 +101,75 @@ It returns a [Koa](https://github.com/koajs/koa/) middleware.
 
 ### `createDefaultProvider()`
 
-This function return a set of providers based on a given the of options.
+This function return a set of providers based on a given set of options, defined below.
+
+```ts
+interface Options {
+  // determines whether to render a `CsrfUniversalProvider`, default is true.
+  csrf: boolean;
+}
+```
+
+_Example_
+
+```tsx
+import React from 'react';
+import {createDefaultProvider} from '@shopify/react-server`;
+
+const MyDefaultProvider = createDefaultProvider({csrf: false});
+
+function App() {
+  return (
+    <MyDefaultProvider>
+      {/* rest of app */}
+    </MyDefaultProvider>
+  )
+}
+```
 
 ### `<DefaultProvider />`
 
-A single component that renders all of the providers required within a typical React application.
+A single component that renders all of the providers required within a typical React application, including a [CookieUniversalProvider](../packages/react-cookie/README.md#client) and a [CrsfUniversalProvider](../packages/react-csrf-universal-provider/README.md).
+
+This component can be used to wrap your entire application to provide it the necessary context for a number of common application needs such as client and server-side cookies.
+
+_Basic Cookie Example_
+
+```tsx
+// app/ui/server.tsx
+
+import React from 'react';
+import {createServer} from '@shopify/react-server';
+import App from './App.tsx';
+
+const app = createServer({
+  render(ctx) {
+    return (
+      <DefaultProviders>
+        <App location={ctx.request.url} />
+      </DefaultProviders>
+    );
+  },
+});
+
+export default app;
+```
+
+```tsx
+// app/ui/App.tsx
+
+import React from 'react';
+import {useCookie} from '@shopify/react-cookie';
+
+export default function App() {
+  // this works
+  const [someCookie] = useCookie('SomeCookieKey');
+
+  return (
+    <>
+      The cookie is {someCookie}
+      {/* rest of app */}
+    </>
+  );
+}
+```

packages/react-server/src/providers/providers.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {useRequestHeader} from '@shopify/react-network';
 import {CsrfUniversalProvider} from '@shopify/react-csrf-universal-provider';
+import {CookieUniversalProvider} from '@shopify/react-cookie';
 import {ConditionalProvider} from './ConditionalProvider';
 
 interface Options {
@@ -18,13 +19,15 @@ export function createCombinedProvider(options?: Options) {
     const csrfToken = useRequestHeader('x-csrf-token') || '';
 
     return (
-      <ConditionalProvider
-        provider={CsrfUniversalProvider}
-        condition={csrf}
-        props={{value: csrfToken}}
-      >
-        {children}
-      </ConditionalProvider>
+      <CookieUniversalProvider>
+        <ConditionalProvider
+          provider={CsrfUniversalProvider}
+          condition={csrf}
+          props={{value: csrfToken}}
+        >
+          {children}
+        </ConditionalProvider>
+      </CookieUniversalProvider>
     );
   };
 }