Recoil Persist State

make recoil state persist with localStorage + Typescript support

Install

1yarn add recoil-persist-state

or

npm install --save recoil-persist-state

How To Use

index.tsx

1import React from 'react'
2import ReactDOM from 'react-dom'
3import { RecoilRoot } from 'recoil'
4import { App } from './App'
5import { initializeState } from './state'
6
7ReactDOM.render(
8  <RecoilRoot initializeState={initializeState}>
9    <App/>
10  </RecoilRoot>,
11  document.getElementById('root')
12)

state.ts

1import { tokenState } from './atoms'
2import RecoilPersistState from 'recoil-persist-state'
3
4const { registerRecoilPersistState, initializeState, persistState } = RecoilPersist({
5  recoilValues: [tokenState]
6})
7
8export {
9  registerRecoilPersistState,
10  initializeState,
11  persistState,
12}

App.tsx

1import React from 'react'
2import { registerRecoilPersistState, persistState } from './state'
3import { useRecoilTransactionObserver_UNSTABLE } from 'recoil'
4
5
6export const App = () => {
7  registerRecoilPersistState() // or useRecoilTransactionObserver_UNSTABLE(persistState)
8  return <h1>Hi</h1>
9}

Related

• https://recoiljs.org/docs/guides/persistence
• recoil-persist (written with useTransactionObservation_DEPRECATED)