swr-micro
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

swr-micro

A lightweight SWR implementation using atomic-state

Example code

import useSWR from 'swr-micro'

const fetcher = (url, config) => fetch(url, config)

export default function Page() {
  const [page, setPage] = useState(1)

  const { data, loading, error, revalidating } = useSWR('https://jsonplaceholder.typicode.com/todos/[id]', {
    params: {
      id: page
    }
  })

  if(loading) return <p>Loading</p>

  if(error) return <p>Error</p>

  return (
    <main>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center'
        }}>
        <button onClick={() => setPage(page - 1)}>{'<'}</button>
        <div style={{ width: '60px', textAlign: 'center' }}>{page}</div>
        <button onClick={() => setPage(page + 1)}>{'>'}</button>
      </div>
      <br />
      <button onClick={todo.revalidate}>Refresh</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  )
}

Note that revalidating will not be true during the first revalidation

Features:

  • Pagination
  • Request deduplication
  • Data dependency
  • Local mutation for optimistic UI
  • Suspense
  • Custom fetcher (e.g. axios, fetch)
  • Search params
  • Revalidate with interval
  • Error-retry
  • Retry on reconnect

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.20latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.20
0.1.10
0.1.00
0.0.90
0.0.80
0.0.70
0.0.60
0.0.51
0.0.40
0.0.30
0.0.20
0.0.10

Package Sidebar

Install

npm i swr-micro

Weekly Downloads

1

Version

0.1.2

License

MIT

Unpacked Size

27.1 kB

Total Files

5

Last publish

Collaborators

  • danybeltran