0
# Context Provider
1
2
React context provider for sharing cookie instances across your application with optional default cookie settings and server-side rendering support.
3
4
## Capabilities
5
6
### CookiesProvider Component
7
8
React context provider that makes cookie functionality available to child components via the `useCookies` hook or `withCookies` HOC.
9
10
```typescript { .api }
11
/**
12
* Context provider for cookie functionality
13
* Must wrap components that use useCookies hook or withCookies HOC
14
*/
15
const CookiesProvider: React.FC<ReactCookieProps>;
16
17
interface ReactCookieProps {
18
/** Optional pre-configured Cookies instance (required for SSR) */
19
cookies?: Cookies;
20
/** Optional default options applied to all setCookie calls */
21
defaultSetOptions?: CookieSetOptions;
22
/** React children components */
23
children?: any;
24
}
25
```
26
27
**Props:**
28
- `cookies` (optional): Pre-configured Cookies instance. Required for server-side rendering to pass request cookies.
29
- `defaultSetOptions` (optional): Default cookie options applied to all `setCookie` calls within the provider context.
30
- `children`: React components that will have access to cookie functionality.
31
32
**Usage Examples:**
33
34
```typescript
35
import React from 'react';
36
import { CookiesProvider } from 'react-cookie';
37
import App from './App';
38
39
// Basic client-side usage
40
function Root() {
41
return (
42
<CookiesProvider>
43
<App />
44
</CookiesProvider>
45
);
46
}
47
48
// With default cookie options
49
function RootWithDefaults() {
50
return (
51
<CookiesProvider
52
defaultSetOptions={{
53
path: '/',
54
secure: true,
55
sameSite: 'strict'
56
}}
57
>
58
<App />
59
</CookiesProvider>
60
);
61
}
62
63
// Server-side rendering usage
64
import { Request, Response } from 'express';
65
import ReactDOMServer from 'react-dom/server';
66
import { CookiesProvider } from 'react-cookie';
67
68
function serverMiddleware(req: Request, res: Response) {
69
const markup = ReactDOMServer.renderToString(
70
<CookiesProvider cookies={req.universalCookies}>
71
<App />
72
</CookiesProvider>
73
);
74
75
res.send(`<!DOCTYPE html><html><body>${markup}</body></html>`);
76
}
77
78
// Client hydration (browser)
79
import { createRoot } from 'react-dom/client';
80
81
const root = createRoot(document.getElementById('root'));
82
root.render(
83
<CookiesProvider>
84
<App />
85
</CookiesProvider>
86
);
87
```
88
89
### Default Set Options
90
91
Configure default cookie options that are applied to all `setCookie` calls within the provider context.
92
93
```typescript { .api }
94
interface CookieSetOptions {
95
/** Cookie path */
96
path?: string;
97
/** Expiration date */
98
expires?: Date;
99
/** Max age in seconds */
100
maxAge?: number;
101
/** Cookie domain */
102
domain?: string;
103
/** HTTPS only flag */
104
secure?: boolean;
105
/** Server access only flag */
106
httpOnly?: boolean;
107
/** SameSite policy */
108
sameSite?: boolean | 'none' | 'lax' | 'strict';
109
/** Partitioned storage flag */
110
partitioned?: boolean;
111
}
112
```
113
114
**Usage with defaults:**
115
116
```typescript
117
// Provider with default options
118
<CookiesProvider defaultSetOptions={{ path: '/', secure: true, maxAge: 3600 }}>
119
<App />
120
</CookiesProvider>
121
122
// Inside App component - these options are automatically applied
123
function App() {
124
const [cookies, setCookie] = useCookies();
125
126
// This will use path: '/', secure: true, maxAge: 3600 by default
127
setCookie('username', 'john');
128
129
// You can still override defaults per cookie
130
setCookie('temporary', 'data', { maxAge: 300 }); // 5 minutes instead of 1 hour
131
132
return <div>App content</div>;
133
}
134
```
135
136
### Server-Side Rendering Setup
137
138
Complete setup for universal (isomorphic) React applications with server-side rendering.
139
140
**Server setup:**
141
142
```typescript
143
// server.ts
144
import express from 'express';
145
import ReactDOMServer from 'react-dom/server';
146
import cookiesMiddleware from 'universal-cookie-express';
147
import { CookiesProvider } from 'react-cookie';
148
import App from './components/App';
149
150
const server = express();
151
152
// Apply universal-cookie-express middleware
153
server.use(cookiesMiddleware());
154
155
server.get('*', (req, res) => {
156
// req.universalCookies is provided by universal-cookie-express
157
const markup = ReactDOMServer.renderToString(
158
<CookiesProvider cookies={req.universalCookies}>
159
<App />
160
</CookiesProvider>
161
);
162
163
const html = `
164
<!DOCTYPE html>
165
<html>
166
<head><title>My App</title></head>
167
<body>
168
<div id="root">${markup}</div>
169
<script src="/client.js"></script>
170
</body>
171
</html>
172
`;
173
174
res.send(html);
175
});
176
177
server.listen(3000);
178
```
179
180
**Client setup:**
181
182
```typescript
183
// client.ts
184
import React from 'react';
185
import { hydrateRoot } from 'react-dom/client';
186
import { CookiesProvider } from 'react-cookie';
187
import App from './components/App';
188
189
// Client-side hydration
190
const container = document.getElementById('root');
191
hydrateRoot(
192
container,
193
<CookiesProvider>
194
<App />
195
</CookiesProvider>
196
);
197
```
198
199
### Error Handling
200
201
The provider automatically handles common error scenarios:
202
203
```typescript
204
// Missing CookiesProvider error
205
function ComponentWithoutProvider() {
206
// This will throw: "Missing <CookiesProvider>"
207
const [cookies] = useCookies();
208
return <div>{cookies.test}</div>;
209
}
210
211
// Proper usage
212
<CookiesProvider>
213
<ComponentWithoutProvider /> {/* Now works correctly */}
214
</CookiesProvider>
215
```