Package Exports

react-cache-enhance

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-cache-enhance) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-cache-enhance

Highly customizable react-cache.

Features

Custom caching.
Lightweight.
TypeScript support.

Install

npm install react-cache-enhance

Usage

createResource(fn: (...args) => Promise<any>, cache?: Cache = Map): (...args) => any

cache: default is Map

import React from 'react'
import ReactDOM from 'react-dom'
import createResource from 'react-cache-enhance'

const useData = createResource((time: number, data: string) => new Promise(resolve => setTimeout(resolve, time, data)))

const C: React.FC = () => <p>Text: {useData(5000, 'Hello World!')}</p>

ReactDOM.render(<React.Suspense fallback={'loading...'}><C /></React.Suspense>)

createFetcher(fetcher?: fetch, cache?: Cache): (input: RequestInfo, init?: RequestInit, type?: string) => any

useFetch(input: RequestInfo, init?: RequestInit, type?: string, fetcher?: fetch, cache?: Cache): any

import { useFetch, createFetcher } from 'react-cache-enhance'

const C: React.FC = () => {
  const json = useFetch('http://example.com/a.json')
  const text = useFetch('http://example.com/a.json', { method: 'POST', body: 'a=1' }, 'text')

  return <>{json.title}: {text}</>
}

usePromise(fn: () => Promise): any

import { usePromise } from 'react-cache-enhance'

const C: React.FC = () => {
  const text = usePromise(() => new Promise(resolve => setTimeout(resolve, 5000, 'Hello World!')))
  return <>{text}</>
}

useLoading(...args)

useLoading(
  fn: () => Promise,
  onError?: (error: any, promise: Promise) => any,
  initValue?: any | () => any,
  isFunction?: boolean // If initValue is a function, this must be true
): { loading: boolean, value: any, error: any }

import { useLoading } from 'react-cache-enhance'

const C: React.FC = () => {
  const { loading, value } = useLoading(() => new Promise(resolve => setTimeout(resolve, 5000, 'Hello World!')))
  return <>{loading ? 'loading...' : value}</>
}

Caches

LruCache

import { Lru } from 'react-cache-enhance'

new Lru()
new Lru(100) // Max cache items count

OneCache

Only cache an item

import { OneCache } from 'react-cache-enhance'

const cache = new OneCache()
cache.key // Current key
cache.value // Current value

Custom

import { Cache } from 'react-cache-enhance'

class MyCache <K, V> implements Cache<K, V> {
  get (key: K): V | undefined { return undefined /* TODO */ }
  set (key: K, value: V): this { return this /* TODO */ }
  has (key: K): boolean { return false /* TODO */ }
}

## Author

Shirasawa

## License

[MIT](./LICENSE)