@scaleway/use-storage
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

@scaleway/use-storage

A React hook to interact with local/session storage in reactive way with the same API as setState


Install

$ pnpm add @scaleway/use-storage

Usage

With 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>
  )
}

Readme

Keywords

none

Package Sidebar

Install

npm i @scaleway/use-storage

Weekly Downloads

1,305

Version

3.0.1

License

MIT

Unpacked Size

9.24 kB

Total Files

11

Last publish

Collaborators

  • codelax
  • quantumsheep
  • scaleway-bot
  • mprost
  • imanu
  • vincentaudebert
  • maliszewskid
  • phiphi