https://github.com/signalsciences/rsrc

Utility components for managing fetch operations in React
https://github.com/signalsciences/rsrc

frontend

Last synced: about 1 month ago
JSON representation

Utility components for managing fetch operations in React

• Host: GitHub
• URL: https://github.com/signalsciences/rsrc
• Owner: signalsciences
• License: mit
• Created: 2019-01-03T00:49:48.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-07-18T20:20:26.000Z (over 1 year ago)
• Last Synced: 2024-10-30T13:24:13.518Z (about 2 months ago)
• Topics: frontend
• Language: JavaScript
• Homepage: https://signalsciences.github.io/rsrc/
• Size: 6.64 MB
• Stars: 25
• Watchers: 8
• Forks: 2
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Logo](https://signalsciences.github.io/rsrc/static/rsrc-logo.svg)

![Rsrc](https://signalsciences.github.io/rsrc/static/rsrc-type.svg)

[![ci][ci-badge]][ci]

[![version][version-badge]][npm]

[![license][license-badge]](LICENSE.md)

[![gzip size][gzip-badge]][gzip]

[ci-badge]: https://github.com/signalsciences/rsrc/workflows/CI/badge.svg

[ci]: https://github.com/signalsciences/rsrc/actions

[version-badge]: https://badgen.net/npm/v/rsrc

[npm]: https://npmjs.com/package/rsrc

[gzip-badge]: http://badgen.net/bundlephobia/minzip/rsrc

[gzip]: https://bundlephobia.com/result?p=rsrc

[license-badge]: https://badgen.net/badge/license/MIT/blue

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

**[Docs](https://signalsciences.github.io/rsrc)**

## Getting Started

```

yarn add rsrc

```

## Usage

```jsx

import React from "react";

import { Resource } from "rsrc";

export default (props) => {

  const { id } = props;

  const url = `/todos/${id}`;

  return (

     ({

          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 (

          


            
{todo.name}

            
{todo.description}

            ×

          

        );

      }}

    

  );

};

```


### Related

- [Redux](https://github.com/reduxjs/redux)

- [React Refetch](https://github.com/heroku/react-refetch)