{"id":20676017,"url":"https://github.com/sammwyy/react-rest-dom","last_synced_at":"2025-04-19T20:54:51.892Z","repository":{"id":47332707,"uuid":"401537209","full_name":"sammwyy/react-rest-dom","owner":"sammwyy","description":"Library that allows you to consume Rest APIs through the React DOM.","archived":false,"fork":false,"pushed_at":"2021-09-17T08:52:55.000Z","size":76,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T13:21:54.650Z","etag":null,"topics":["api","api-client","api-rest","client","react","react-api","react-dom","react-rest","reactjs","rest","rest-api","rest-client","restful","restful-api"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-rest-dom","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sammwyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-31T01:36:08.000Z","updated_at":"2024-09-03T08:53:03.000Z","dependencies_parsed_at":"2022-09-05T00:51:20.492Z","dependency_job_id":null,"html_url":"https://github.com/sammwyy/react-rest-dom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammwyy%2Freact-rest-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammwyy%2Freact-rest-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammwyy%2Freact-rest-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammwyy%2Freact-rest-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sammwyy","download_url":"https://codeload.github.com/sammwyy/react-rest-dom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249798943,"owners_count":21326930,"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","api-client","api-rest","client","react","react-api","react-dom","react-rest","reactjs","rest","rest-api","rest-client","restful","restful-api"],"created_at":"2024-11-16T21:11:28.478Z","updated_at":"2025-04-19T20:54:51.868Z","avatar_url":"https://github.com/sammwyy.png","language":"JavaScript","funding_links":["https://paypal.me/sammwy"],"categories":[],"sub_categories":[],"readme":"# React Rest DOM\n\nThis library allows to make requests to Rest APIs and render them easily in the DOM. It also allows rendering components in case there is an error and another while the request is loading.\n\n## ToDo\n\n- [x] Rest context.\n- [x] Rest client.  \n- [x] Authentication.\n- [x] Error handler.\n- [x] Loading handler.\n- [x] Data handler. \n- [ ] Error with Data handler.\n- [ ] Cache.\n\n## How to use\n\n### 1. Context\n\nIn order to use the library you must first create an execution context which will specify the URL of the API.\n\n```javascript\n// index.js\nimport { RestContext } from \"react-rest-dom\";\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cRestContext.Provider url=\"https://jsonplaceholder.typicode.com/\" \u003e\n      \u003cApp /\u003e\n    \u003c/RestContext.Provider\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n### 2. Authentication\n\nIn case of requiring authentication in the requests, it can be specified in the context.\n\n```javascript\n// index.js\nimport { RestContext } from \"react-rest-dom\";\n\nconst authFactory = () =\u003e {\n  const token = localStorage.getItem(\"token\");\n  return token ? \"Bearer \" + token : null;\n};\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cRestContext.Provider \n      url=\"https://jsonplaceholder.typicode.com/\" \n      auth={authFactory}\n     \u003e\n      \u003cApp /\u003e\n    \u003c/RestContext.Provider\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n### 3. GET Request\n\nHere is an example of how to make a GET request to an endpoint, in this case to \"/todos\" (from the API which url we have specified in the context)\n\n```javascript\n// App.js or any component\nimport { RequestRenderer } from \"react-rest-dom\";\n\nfunction App() {\n  return (\n    \u003cRequestRenderer\n      path=\"/todos\"  // Slash (/) at the start is optional.\n      onData={(data, statusCode /* Example: 200, 201, 400, 404, 500... */) =\u003e\n        data.map((item, index) =\u003e {\n          return (\n            \u003cdiv id={index}\u003e\n              ID: {item.id} \u003cbr /\u003e\n              Title: {item.title} \u003cbr /\u003e\n              Completed: {item.completed}\n              \u003chr /\u003e\n            \u003c/div\u003e\n          );\n        })\n      }\n    /\u003e\n  );\n}\n```\n\n### 4. POST Request\n\nWe can make a POST request declaring the method as a property of the component, we can do the same with the Body.\n\n```javascript\n\u003cRequestRenderer\n  path=\"/todos\"\n  method=\"POST\" // Can be any valid method, like PUT, PATCH, DELETE...\n  body={{ yourBody: \"content\" }}\n  onData={...}\n/\u003e;\n\n```\n\n### 5. Custom Headers\n\nYou can declare custom headers to send on request by passing them in the \"headers\" property in the component.\n\n```javascript\n\u003cRequestRenderer\n  path=\"/todos\"\n  headers={{ myHeader: \"Your Value\" }}\n  onData={...}\n/\u003e;\n```\n\n### 6. Loading Handling\n\nYou can render a component while the request is loading, for example a text, an animation or any type of component.\n\n```javascript\n\u003cRequestRenderer\n  path=\"/todos\"\n  headers={{ myHeader: \"Your Value\" }}\n  onLoading={() =\u003e (\n    \u003ch1\u003eLoading...\u003c/h1\u003e\n  )}\n  onData={...}\n/\u003e;\n```\n\n### 7. Error Handling\n\nYou can also render a component in case there is some kind of error when sending the request.\n\n```javascript\n\u003cRequestRenderer\n  path=\"/todos\"\n  headers={{ myHeader: \"Your Value\" }}\n  onError={(e) =\u003e (\n    \u003ch1\u003eError: { e.toString() } \u003c/h1\u003e\n  )}\n  onData={...}\n/\u003e;\n```\n\n## Contribute\n\nI made this library to manage my projects so it is not well developed but it does the job. If you think it can improve, I invite you to create a pull request so we all benefit.  \n\nIf you want to donate to the project you can do it through [PayPal](https://paypal.me/sammwy).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammwyy%2Freact-rest-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsammwyy%2Freact-rest-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammwyy%2Freact-rest-dom/lists"}