Recoil Persist State

make recoil state persist with localStorage + Typescript support

Install

yarn add recoil-persist-state

or

npm install --save recoil-persist-state

How To Use

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { RecoilRoot } from 'recoil'
import { App } from './App'
import { initializeState } from './state'

ReactDOM.render(
  <RecoilRoot initializeState={initializeState}>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
)

state.ts

import { tokenState } from './atoms'
import RecoilPersistState from 'recoil-persist-state'

const { registerRecoilPersistState, initializeState, persistState } = RecoilPersist({
  recoilValues: [tokenState]
})

export {
  registerRecoilPersistState,
  initializeState,
  persistState,
}

App.tsx

import React from 'react'
import { registerRecoilPersistState, persistState } from './state'
import { useRecoilTransactionObserver_UNSTABLE } from 'recoil'


export const App = () => {
  registerRecoilPersistState() // or useRecoilTransactionObserver_UNSTABLE(persistState)
  return <h1>Hi</h1>
}

Related

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