@intrnl/react-asset

react-asset

Resource-based data fetching library for React.

Requires React 18 and up

Usage

import { createAsset } from '@intrnl/react-asset';


let posts = createAsset(async (id) => {
  let response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return response.json();
});

function App () {
  let [id, setId] = React.useState(1);

  let resource = posts.use(id);

  return (
    <React.Fragment>
      <React.Suspense fallback={<PostFallback />}>
        <Post resource={resource} />
      </React.Suspense>
    </React.Fragment>
  );
}

function Post ({ resource }) {
  let { id, title, body } = resource.read();

  return (
    <div className='post'>
      <h1>{title}</h1>
      <p>{body}</p>
    </div>
  );
}