Skip to main content

Persist value on localStorage

Description​

This is an example where you can store in local-storage (it could be any other place as cookies) the theme selected by the user in case he/she wants to change it.
Then on initialization of the store, we get the theme from local-storage and set it as the current theme.

Example​

// store.ts
import { cervello } from '@cervello/react'

const { store } = cervello({
  theme: 'dark',
  user: null,
}, {
  afterChange: (storeChange) => {
    if (storeChange.fieldPath === 'theme') {
      localStorage.setItem('theme', storeChange.newValue)
    }
  },
})

// theme-provider.ts
import { useStore } from './store'

function ThemeProvider () {
  const store = useStore({
    select: ['theme']
    initialValue: (currentStore) => {
      const themeValue = localStorage.getItem('theme') ?? 'dark'
      return {
        ...currentStore,
        theme: themeValue,
      }
    },
  })

  return (
    <ThemeContext.Provider value={store.theme}>
      {children}
    </ThemeContext.Provider>
  )
}