benpink / rsrc

Utility components for managing fetch operations in React

A collection of components designed to simplify fetch state in React.

Docs

🚨 NOTICE 🚨

Effective May 17th 2021 the default branch will change from master to main. Run the following commands to update a local clone:

git branch -m master main
git fetch origin
git branch -u origin/main main
git remote set-head origin -a

Getting Started

yarn add rsrc

Usage

import React from "react";
import { Resource } from "rsrc";

export default (props) => {
  const { id } = props;
  const url = `/todos/${id}`;

  return (
    <Resource
      url={url}
      maxAge={60}
      actions={{
        remove: () => ({
          options: {
            method: "DELETE",
          },
          invalidates: ["/todos"],
        }),
      }}
    >
      {({ state, actions }) => {
        if (!state.fulfilled) return null;

        const todo = state.value;

        const handleClick = () => {
          actions
            .remove()
            .then((value) => {
              /* */
            })
            .catch((error) => {
              /* */
            });
        };

        return (
          <div>
            <h1>{todo.name}</h1>
            <p>{todo.description}</p>
            <button onClick={handleClick}>×</button>
          </div>
        );
      }}
    </Resource>
  );
};

Related

• Redux
• React Refetch