Skip to content
Utility components for managing fetch operations in React
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs fix code example within tutorial Nov 6, 2019
examples tweaks for example to accomodate smaller real estate in codesandbox Nov 5, 2019
flow-typed/npm refactor mv flow setup to root Oct 6, 2019
src allow invalidates to be passed as a string, Array<string>, or filter … Nov 6, 2019
test allow invalidates to be passed as a string, Array<string>, or filter … Nov 6, 2019
website
.eslintignore add examples to eslint ignore Nov 4, 2019
.flowconfig rename docs publish, add ci step to install website deps, ignore .tmp Oct 31, 2019
.gitignore move website deps to website dir, use webpack to resolve symlinked do… Oct 30, 2019
.npmignore initial commit Jan 15, 2019
.prettierignore update pkg scripts / ignore files, add details to README Oct 7, 2019
LICENSE initial commit Jan 15, 2019
README.md
package.json v1.1.1 Nov 6, 2019
rollup.config.js simplify prettier targets, format Oct 6, 2019
yarn.lock bump deps Nov 4, 2019

README.md

Logo

Rsrc

ci version license gzip size

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

Docs

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(fetchState => {
              /* */
            })
            .catch(error => {
              /* */
            });
        };

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

Related

You can’t perform that action at this time.