A React hook to interact with local/session storage in reactive way with the same API as setState
$ pnpm add @scaleway/use-storageWith localStorage
import React from 'react'
import { useLocalStorage } from '@scaleway/use-storage'
const Component = () => {
const [value, setValue] = useLocalStorage('key')
return (
<div>
<span>{value}</span>
<button onClick={() => setValue('test from hook')}>
Click me to set value to "test from hook"
</button>
<button onClick={() => localStorage.setItem('key', 'test from window')}>
Click me to set value to "test from window"
</button>
</div>
)
}With sessionStorage
import React from 'react'
import { useSessionStorage } from '@scaleway/use-storage'
const Component = () => {
const [value, setValue] = useSessionStorage('key')
return (
<div>
<span>{value}</span>
<button onClick={() => setValue('test from hook')}>
Click me to set value to "test from hook"
</button>
<button onClick={() => localStorage.setItem('key', 'test from window')}>
Click me to set value to "test from window"
</button>
</div>
)
}With initialValue
import React from 'react'
import { useLocalStorage } from '@scaleway/use-storage'
const Component = () => {
const [value, setValue] = useLocalStorage('key', 'initial')
return (
<div>
<span>{value}</span> // Will be "initial" of no other value is already set
<button onClick={() => setValue('test from hook')}>
Click me to set value to "test from hook"
</button>
<button onClick={() => localStorage.setItem('key', 'test from window')}>
Click me to set value to "test from window"
</button>
</div>
)
}