JSPM – use-asset@0.0.1

Package Exports

use-asset

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 (use-asset) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A simple loading strategy for react suspense based on react-promise-suspense.

npm install use-asset

Using assets

use-asset allows you to create single assets, which bring their own cache. This is great for preload and cache busting.

import React, { Suspense } from "react"
import { createAsset } from "use-asset"

// First create an asset, it hands you resolve and reject functions.
// The rest of the arguments are user-provided.
// Call resolve whenever you have obtained your result.
const hackerNewsPost = createAsset(async (res, rej, id) => {
  const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)
  const json = await res.json()
  res(json)
})

// You can preload assets, these will be cached
hackerNewsPost.preload(9000)

function Post({ id }) {
  // Request asset, this component will now suspend
  const { by, title } = hackerNewsPost.read(id)
  return <div>{title} by {by}</div>
}

function App() {
  <Suspense fallback={null}>
    <Post id={9000}>
  </Suspense>
}

Cache busting strategies

// This asset will be removed from the cache in 15 seconds
const hackerNewsPost = createAsset(..., 15000)

// Clear all cached entries
hackerNewsPost.clear()

// Clear a specific entry
hackerNewsPost.clear(9000)

Reading entries outside of suspense

// This will either return the value (without suspense!) or undefined
hackerNewsPost.peek(9000)

Using hooks and global cache

You can opt into use our hook, useAsset, this opens up a global cache, anything you request at any time is written into it.

import { useAsset } from "use-asset"

const hackerNewsPost = async (res, rej, id) => {
  const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)
  const json = await res.json()
  res(json)
}

function Post({ id }) {
  const { by, title } = useAsset(hackerNewsPost, [id])
  return <div>{title} by {by}</div>
}

function App() {
  <Suspense fallback={null}>
    <Post id={9000}>
  </Suspense>
}

Cache busting and peeking

It has the same api

// Clear all cached entries
useAsset.clear()
// Clear a specific entry
useAsset.clear(9000)
// This will either return the value (without suspense!) or undefined
useAsset.peek(9000)