{"id":23070568,"url":"https://github.com/sametcodes/react-use-api","last_synced_at":"2025-07-12T07:04:39.791Z","repository":{"id":134107263,"uuid":"540824299","full_name":"sametcodes/react-use-api","owner":"sametcodes","description":"A custom hook for HTTP methods with inner state management.","archived":false,"fork":false,"pushed_at":"2022-10-05T16:01:58.000Z","size":177,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T04:56:37.728Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sametcodes.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-24T12:37:05.000Z","updated_at":"2023-08-31T19:09:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"71b64efd-4d20-44e0-a3de-7075622d5ef2","html_url":"https://github.com/sametcodes/react-use-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sametcodes/react-use-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Freact-use-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Freact-use-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Freact-use-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Freact-use-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sametcodes","download_url":"https://codeload.github.com/sametcodes/react-use-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Freact-use-api/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261392183,"owners_count":23151719,"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":[],"created_at":"2024-12-16T06:27:11.584Z","updated_at":"2025-06-23T01:08:57.114Z","avatar_url":"https://github.com/sametcodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-use-api\n\n\u003e Do not use. This is an experimental package for now.\n\n## Development\n\nThe package has been developed on a React project, it's not a standalone package for now. I've been working on finding for the best way to handle renders and hold inner states. If you want to contribute, you need to serve the `users.json` file through [json-server](https://github.com/typicode/json-server), install the dependencies and run the react project.\n \n## Usage\n\nThis package provides request management with an inner state on React components. It's built with query-mutation request pattern.\n\n### `APIContext` \n\n`APIContext` must be used to as a parent node to provide endpoints, options and configurations of requests. Once it's used, the `useAPI` hook function can be used in components.\n\n```javascript\nconst options = {\n  base_url: 'http://localhost:3000'\n}\n\nroot.render(\n  \u003cAPIContext options={options}\u003e\n    \u003cApp /\u003e\n  \u003c/APIContext\u003e\n);\n```\n\n### `useAPI` and HTTP method hook functions\n\n`useAPI` exposes HTTP method functions for the given endpoint as parameter. Method options, body or query parameters can be passed as arguments into the functions.\n\nThe method-hook function returns values: *store* and the method function itself. The reason of returning the method function in the results is resending the request. The variables object will be saved into the `store.variables`.\n\n#### Example with the query method\n\n```javascript\nconst App = () =\u003e {\n    const [{data, variables}, get] = useAPI(\"/users\").get({ page: 1 });\n\n    const nextPage = () =\u003e {\n        get({ page: variables.page + 1 })\n    }\n\n    return \u003cdiv\u003e\n        {data.map(user) =\u003e \u003cdiv key={user.id}\u003e\n            \u003cspan\u003e{user.name}\u003c/span\u003e\n        \u003c/div\u003e}\n\n        \u003cbutton onClick={nextPage}\u003eNext page\u003c/button\u003e\n    \u003c/div\u003e\n}\n\n```\n\nIf any error will be thrown during the request, the error will be saved into the `error` object and it can be reached as `store.error` during rendering process.\n\nThe `data` and `response` values might be confusing. The `data` value holds the same value with `response` value, but it can be changed by defining an `updateStore` callback function as the second parameter of the returned method function from the hook value. The main idea is the `data` value is that it provides storing responses of more then one request, such as \"loding more\" functionality.\n\n```javascript\nconst App = () =\u003e {\n    const [{data, variables}, get] = useAPI(\"/users\").get({ page: 1 });\n\n    const loadMore = () =\u003e {\n        get({ page: variables.page + 1 }, (response, store) =\u003e {\n            return [...store, ...response] \n        })\n    }\n\n    return \u003cdiv\u003e\n        {data.map(user) =\u003e \u003cdiv key={user.id}\u003e\n            \u003cspan\u003e{user.name}\u003c/span\u003e\n        \u003c/div\u003e}\n\n        \u003cbutton onClick={loadMore}\u003eLoad more\u003c/button\u003e\n    \u003c/div\u003e\n}\n```\n\n#### Example with the mutation methods\n\nMutation methods can be used to send `POST`, `PUT`, `PATCH` and `DELETE` requests. The functions can be taken a custom path, if they don't, they will use the main path that is passed in the `useAPI()` hook.\n\nUnlike the `.get` method, the mutation methods don't be triggered initially when the component has mounted. They must be triggered by using the returned method function in the hook results. The `updateStore` callback function works in the same way as we've seen above.\n\n```javascript\nconst App = () =\u003e {\n    const [{ loading, error, data }, post] = useAPI(\"/users\").post();\n\n    const onSubmit = (values) =\u003e {\n        post({ body: values }, (response, store) =\u003e {\n            return [response, ...store];\n        })\n    }\n\n    return \u003cdiv\u003e\n        \u003cForm onSubmit={onSubmit}\u003e\n    \u003c/div\u003e\n}\n```\n\n#### Example with using query and mutation methods together\n\nWe can assign the `useAPI()` returning value into a variable to use multiple HTTP methods and it will provide us a basic state management. Let's use `.get`, `.post` and `.delete` methods together without having a local state in the component.\n\nCustom path can be re-defined and it's allowed to interpolate parameters into a pre-defined custom path right before sending the request. Check `API.delete` hook call and the `params` argument passed into the `remove` function.\n\n```javascript\nconst App = () =\u003e {\n    const API = useAPI(\"/users\");\n    const [{ loading, error, data }, get] = API.get();\n\n    const [postLoading, post] = API.post(); // no custom path used, so the path is /users\n    const [, remove] = API.delete(\"/users/:id\"); // custom path can be re-defined \n\n    const onSubmit = (values) =\u003e {\n        post({ body: values }, (response, store) =\u003e {\n            return [response, ...store];\n        })\n    }\n\n    const onDelete = (id) =\u003e {\n        remove({ params: { id } }, (response, store) =\u003e {\n            return store.filter((item: any) =\u003e item.id !== id)\n        })\n    }\n\n    const loadMore = () =\u003e {\n        get({ page: variables.page + 1 }, (response, store) =\u003e {\n            return [...store, ...response] \n        })\n    }\n\n    return \u003cdiv\u003e\n        {data.map(user) =\u003e \u003cdiv key={user.id}\u003e\n            \u003cspan\u003e{user.name}\u003c/span\u003e\n            \u003cspan onClick={() =\u003e onDelete(user.id)}\u003e\u003c/span\u003e\n        \u003c/div\u003e}\n\n        \u003cbutton onClick={loadMore}\u003eLoad more\u003c/button\u003e\n\n        \u003cForm onSubmit={onSubmit}\u003e\n    \u003c/div\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametcodes%2Freact-use-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsametcodes%2Freact-use-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametcodes%2Freact-use-api/lists"}