A collection of components designed to simplify fetch state in React.
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>
);
};