{"id":15547350,"url":"https://github.com/charlesmangwa/react-data-fetching","last_synced_at":"2025-04-04T19:14:35.483Z","repository":{"id":52137324,"uuid":"111920183","full_name":"CharlesMangwa/react-data-fetching","owner":"CharlesMangwa","description":"🎣 Declarative data fetching for React.","archived":false,"fork":false,"pushed_at":"2019-05-08T16:41:10.000Z","size":1464,"stargazers_count":491,"open_issues_count":10,"forks_count":27,"subscribers_count":7,"default_branch":"next","last_synced_at":"2025-03-28T18:14:01.557Z","etag":null,"topics":["api","component","fetch","react","react-native"],"latest_commit_sha":null,"homepage":"https://react-data-fetching.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CharlesMangwa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-24T13:13:28.000Z","updated_at":"2024-10-30T12:31:37.000Z","dependencies_parsed_at":"2022-08-24T00:50:26.861Z","dependency_job_id":null,"html_url":"https://github.com/CharlesMangwa/react-data-fetching","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-data-fetching","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-data-fetching/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-data-fetching/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-data-fetching/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlesMangwa","download_url":"https://codeload.github.com/CharlesMangwa/react-data-fetching/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","component","fetch","react","react-native"],"created_at":"2024-10-02T13:08:51.222Z","updated_at":"2025-04-04T19:14:35.460Z","avatar_url":"https://github.com/CharlesMangwa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/CharlesMangwa/react-data-fetching\" target=\"\\_parent\"\u003e\n    \u003cimg \n      alt=\"React Data Fetching logo\"\n      src=\"docs/images/logo.png\"\n      width=\"900\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eDeclarative data fetching for React 🎣\u003c/strong\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://circleci.com/gh/CharlesMangwa/react-data-fetching\"\u003e\n    \u003cimg\n      alt=\"build: CircleCI\"\n      src=\"https://circleci.com/gh/CharlesMangwa/react-data-fetching.svg?style=shield\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/CharlesMangwa/react-data-fetching?branch=master\"\u003e\n    \u003cimg\n      alt=\"coverage: Coveralls\"\n      src=\"https://coveralls.io/repos/github/CharlesMangwa/react-data-fetching/badge.svg?branch=master\u0026t=v4mvo8\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-data-fetching\"\u003e\n    \u003cimg\n      alt=\"version: next\"\n      src=\"https://img.shields.io/badge/npm-next-orange.svg\"\n    /\u003e\n  \u003c/a\u003e\n  \u003cimg \n    alt=\"gzip size\"\n    src=\"https://img.shields.io/badge/gzip%20size-7.58%20kB-brightgreen.svg\"\n  /\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg\n      alt=\"code style\"\n      src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"\n    /\u003e\n  \u003c/a\u003e\n  \u003cimg\n    alt=\"module formats: umd, cjs, esm\"\n    src=\"https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-7020f5.svg\"\n  /\u003e\n\u003c/div\u003e\n\n#\n\n`react-data-fetching` provides a very intuitive way to perform any REST API call without hassle, through a single React component. It also helps you take care of timeouts, loading states, errors handling, data saving, uploading/downloading progress, etc. Fetching data while letting the user know what's going on has never been that easy!\n\nThe package is quite lightweight (~7 kB gzipped) and has been built from the ground up with universal apps in mind: you can use it wherever React is rendering - meaning it works seamlessly with React (web) \u0026 React Native!\n\n## Installation\n\nUsing [Yarn](https://yarnpkg.com/):\n\n```shell\n$ yarn add react-data-fetching@next\n```\n\nThen, use it as you would with anything else:\n\n```js\n// using ES6 modules\nimport { Fetch } from 'react-data-fetching'\n\n// using CommonJS modules\nvar Fetch = require('react-data-fetching').Fetch\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n\u003cscript src=\"https://unpkg.com/react-data-fetching/umd/react-data-fetching.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can find the library on `window.ReactDataFetching`.\n\n## Usage\n\nThe following illustrates the simplest way to use `react-data-fetching`:\n\n```jsx\nimport React, { Component } from 'react'\nimport { Fetch } from 'react-data-fetching'\n\nimport { Loader } from './components'\n\nexport default class App extends Component {\n  render() {\n    return (\n      \u003cFetch\n        loader={\u003cLoader /\u003e} // Replace this with your lovely handcrafted loader\n        url=\"https://api.github.com/users/octocat\"\n        timeout={5000}\n      \u003e\n        {({ data }) =\u003e (\n          \u003cdiv\u003e\n            \u003ch1\u003eUsername\u003c/h1\u003e\n            \u003cp\u003e{data.name}\u003c/p\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/Fetch\u003e\n    )\n  }\n}\n```\n\nThe package gives access to `\u003cFetch\u003e`, `\u003cFetchProvider\u003e` and `requestToApi()`. To have an in-depth explanation of how to use them, how they work and even more, head to this post: [Introducing React Data Fetching 🎣](https://medium.com/@CharlesMangwa/introducing-react-data-fetching-2140a1d36cc8).\n\n## Docs\n\nThe documentation is available here: https://react-data-fetching.now.sh.\n\n## Todo\n\nWant to submit a PR but don't know where to start? Here is a list of features you could consider! This might change in the future as the API is far from being complete.\n\n- [x] Add compatibility to React 16.3.0+ lifecycles ⚛️\n- [x] Implement React 16.3.0+ new context API ⚛️\n- [ ] Add an `/examples` folder for newcomers \u0026 contributors 📂\n- [ ] Add the ability to run multiple fetches serially or in parallel ⛓\n- [ ] Implement a caching system (through React's Suspense?) 📥\n- [ ] What else?\n\n## About\n\n`react-data-fetching` is currently developed and maintained by yours truly, [@Charles_Mangwa](https://twitter.com/Charles_Mangwa). Feel free to get in touch if you want to contribute!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesmangwa%2Freact-data-fetching","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlesmangwa%2Freact-data-fetching","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesmangwa%2Freact-data-fetching/lists"}