0
# React Cookie
1

2
React Cookie is a universal cookie management library for React applications that works seamlessly across both client-side and server-side rendering environments. It provides React hooks, higher-order components, and context providers for accessing and modifying cookies with full support for all standard cookie options from RFC 6265.
3

4
## Package Information
5

6
- **Package Name**: react-cookie
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-cookie`
10

11
## Core Imports
12

13
```typescript
14
import { useCookies, CookiesProvider, withCookies, Cookies } from "react-cookie";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { useCookies, CookiesProvider, withCookies, Cookies } = require("react-cookie");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from 'react';
27
import { CookiesProvider, useCookies } from 'react-cookie';
28

29
// Root component setup
30
function App() {
31
  return (
32
    <CookiesProvider defaultSetOptions={{ path: '/' }}>
33
      <UserComponent />
34
    </CookiesProvider>
35
  );
36
}
37

38
// Using cookies in components
39
function UserComponent() {
40
  const [cookies, setCookie, removeCookie] = useCookies(['username']);
41

42
  const handleLogin = (username: string) => {
43
    setCookie('username', username, { expires: new Date(Date.now() + 86400000) });
44
  };
45

46
  const handleLogout = () => {
47
    removeCookie('username');
48
  };
49

50
  return (
51
    <div>
52
      {cookies.username ? (
53
        <div>
54
          <p>Welcome, {cookies.username}!</p>
55
          <button onClick={handleLogout}>Logout</button>
56
        </div>
57
      ) : (
58
        <button onClick={() => handleLogin('john_doe')}>Login</button>
59
      )}
60
    </div>
61
  );
62
}
63
```
64

65
## Architecture
66

67
React Cookie is built around several key components:
68

69
- **Context System**: Uses React Context to share cookie instances across components
70
- **Hook Interface**: Modern `useCookies` hook for functional components with automatic re-rendering
71
- **HOC Pattern**: `withCookies` higher-order component for class components  
72
- **Universal Design**: Works identically in client-side and server-side rendering environments
73
- **Type Safety**: Full TypeScript support with generic type preservation
74

75
## Capabilities
76

77
### React Hooks Interface
78

79
Modern React hooks for accessing and modifying cookies in functional components with automatic re-rendering on cookie changes.
80

81
```typescript { .api }
82
function useCookies<T extends string, U = { [K in T]?: any }>(
83
  dependencies?: T[],
84
  options?: CookieGetOptions,
85
): [
86
  U,
87
  (name: T, value: Cookie, options?: CookieSetOptions) => void,
88
  (name: T, options?: CookieSetOptions) => void,
89
  () => void,
90
];
91
```
92

93
[React Hooks](./react-hooks.md)
94

95
### Context Provider
96

97
React context provider for sharing cookie instances across your application with optional default cookie settings.
98

99
```typescript { .api }
100
const CookiesProvider: React.FC<ReactCookieProps>;
101

102
interface ReactCookieProps {
103
  cookies?: Cookies;
104
  defaultSetOptions?: CookieSetOptions;
105
  children?: React.ReactNode;
106
}
107
```
108

109
[Context Provider](./context-provider.md)
110

111
### Higher-Order Component
112

113
Higher-order component pattern for injecting cookie functionality into class components or components that need cookie access via props.
114

115
```typescript { .api }
116
function withCookies<T extends ReactCookieProps>(
117
  WrappedComponent: React.ComponentType<T>,
118
): React.ComponentType<Omit<T, keyof ReactCookieProps>>;
119
```
120

121
[Higher-Order Component](./higher-order-component.md)
122

123
### Cookie Management
124

125
Direct cookie management through the Cookies class for advanced use cases and server-side integration.
126

127
```typescript { .api }
128
class Cookies {
129
  get(name: string, options?: CookieGetOptions): any;
130
  get<T>(name: string, options?: CookieGetOptions): T;
131
  getAll(options?: CookieGetOptions): any;
132
  getAll<T>(options?: CookieGetOptions): T;
133
  set(name: string, value: Cookie, options?: CookieSetOptions): void;
134
  remove(name: string, options?: CookieSetOptions): void;
135
  addChangeListener(callback: CookieChangeListener): void;
136
  removeChangeListener(callback: CookieChangeListener): void;
137
  removeAllChangeListeners(): void;
138
  update(): void;
139
}
140
```
141

142
[Cookie Management](./cookie-management.md)
143

144
## Types
145

146
```typescript { .api }
147
type Cookie = any;
148

149
interface CookieSetOptions {
150
  path?: string;
151
  expires?: Date;
152
  maxAge?: number;
153
  domain?: string;
154
  secure?: boolean;
155
  httpOnly?: boolean;
156
  sameSite?: boolean | 'none' | 'lax' | 'strict';
157
  partitioned?: boolean;
158
}
159

160
interface CookieGetOptions {
161
  doNotParse?: boolean;
162
  doNotUpdate?: boolean;
163
}
164

165
interface CookieChangeOptions {
166
  name: string;
167
  value?: any;
168
  options?: CookieSetOptions;
169
}
170

171
type CookieChangeListener = (options: CookieChangeOptions) => void;
172

173
interface ReactCookieProps {
174
  cookies?: Cookies;
175
  defaultSetOptions?: CookieSetOptions;
176
  allCookies?: { [name: string]: Cookie };
177
  children?: any;
178
  ref?: React.RefObject<{}>;
179
}
180
```