react-cookie
React¹⁷.0.2, react-cookie⁴.0.3, Created at July 21, 2021, Read Series…
Chose react-cookie
npm install react-cookie
useCookies, cookies, setCookie, and useEffect in src/App.tsx
[Try to understand] useCookies, cookies, setCookie, useEffect
and cookies[‘cookieTest’]. “cookieTest” is the key testing cookie. “abcdefg-123” is the cookie value and path: ‘/’. The cookie key-value is set when page load via useEffect.
[Try to understand] useEffect with ,[] at the end, is equivalent of componentDidMount in class component.
import { useCookies } from 'react-cookie';
...
export default function App() {
...
const [cookies, setCookie] = useCookies(['cookieTest']);
useEffect(() => {
setCookie('cookieTest', 'abcdefg-123', { path: '/' })
}, []) return (
...
{/* Basic-1.6. react-cookie */}
<Accordion>
<AccordionSummary expandIcon={<ExpandMore />} aria-controls="panel2a-content" id="panel2a-header-basic-1.2">
<Typography>Basic-1.6. react-cookie -
{cookies['cookieTest']}</Typography>
</AccordionSummary>
<AccordionDetails>
{cookies['cookieTest']}
</AccordionDetails>
</Accordion>
...
);
}
<CookiesProvider/> in src/index.tsx
[Try to understand] <CookiesProvider/>
// imports
...
import { CookiesProvider } from 'react-cookie';ReactDOM.render(
<Suspense fallback={<div>...</div>}>
<CookiesProvider>
{/* Wrap your original code here */}
<Provider store={store}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<CssBaseline />
<App />
</BrowserRouter>
</ThemeProvider>
</Provider>
</CookiesProvider>
</Suspense>,
document.querySelector('#root'),
);reportWebVitals();
Github commits is here: Basic-1.6. react-cookie
Conclusion
react-cookie
is built on top of universal-cookie