@shopify/react-cookie
v2.1.4
Published
Cookies in React for the server and client
Downloads
25,292
Maintainers
Keywords
Readme
@shopify/react-cookie
Cookies in React for the server and client.
Installation
yarn add @shopify/react-cookie
Usage
Server
To extract cookies during the server-side render of your application, your component needs to have access to the NetworkManager
from @shopify/react-network
. You can pass the initial server cookie value when the manager is instantiated within your server-side middleware.
For full details on setting up @shopify/react-network
, see the readme for that package.
Koa Server Example
import React from 'react';
import {render} from '@shopify/react-html/server';
import {extract} from '@shopify/react-effect/server';
import {
NetworkManager,
NetworkContext,
applyToContext,
} from '@shopify/react-network/server';
import App from './App';
export default function renderApp(ctx: Context) {
const networkManager = new NetworkManager({
// Here we provide the server cookies
cookies: ctx.request.headers.cookie || '',
});
const app = <App />;
await extract(app, {
decorate: (element) => (
<NetworkContext.Provider value={networkManager}>
{element}
</NetworkContext.Provider>
),
});
applyToContext(ctx, networkManager);
ctx.body = render(
<NetworkContext.Provider value={networkManager}>
{app}
</NetworkContext.Provider>,
);
}
Client
To use the useCookie()
hook provided by this library, you must first wrap your client-side application tree in the <CookieUniversalProvider />
component.
React App Provider Example
// App.tsx
import {CookieUniversalProvider} from '@shopify/react-cookie';
import {SomeComponent} from './someComponent'; // see `hooks` example below
function App() {
<CookieUniversalProvider>
// rest of your tree
<SomeComponent />
</CookieUniversalProvider>;
}
Hooks
useCookie(name: string)
This hook is called with the name of a given cookie and returns the current value and a setter for that cookie. If the setter is called without a value argument, it will remove the cookie.
React Hook Example
// SomeComponent.tsx
import React from 'react';
import {useCookie} from '@shopify/react-cookie';
function SomeComponent() {
const [cookie, setCookie] = useCookie('fooCookie');
const handleChange = (event) => setCookie(event.target.value);
const removeCookie = () => setCookie();
return (
<>
<p>the cookie is {cookie}</p>
<TextField value={cookie} onChange={handleChange} />
<button type="button" onClick={removeCookie}>
Remove Cookie
</button>
</>
);
}
Utilities
createCookies()
This utility can be used to create an initial set of cookies in the document.cookie
. This can be useful in test set up.
clearCookies()
This utility can be used to clear a set of cookies from the document.cookie
. This can be useful when you need to clear the cookies between tests, such as in an afterEach
block.