{"id":25649629,"url":"https://github.com/mdmahfuzrp/react-api-call","last_synced_at":"2025-04-15T18:20:12.295Z","repository":{"id":241580346,"uuid":"798505781","full_name":"mdmahfuzrp/react-api-call","owner":"mdmahfuzrp","description":"Say Goodbye to Api Headaches: Effortless Api Call With React-Api-Call","archived":false,"fork":false,"pushed_at":"2024-05-30T14:39:07.000Z","size":46,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T10:11:11.485Z","etag":null,"topics":["api","api-call","apicall","apicalls","apis","mahfuzrp","mdmahfuzrp","mrp","next","react","react-api","react-api-call","react-api-hooks","reactapicall","submit-api"],"latest_commit_sha":null,"homepage":"https://reactapicall.vercel.app","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/mdmahfuzrp.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-09T23:09:41.000Z","updated_at":"2024-05-30T14:39:10.000Z","dependencies_parsed_at":"2024-05-29T05:31:00.369Z","dependency_job_id":"3a24a7dc-9d3e-4b2a-8d4f-c628f8435ddb","html_url":"https://github.com/mdmahfuzrp/react-api-call","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":0.25,"last_synced_commit":"f69fa6d0b16cf8e9566d6e65307b59d4d8cca306"},"previous_names":["mdmahfuzrp/react-api-call"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdmahfuzrp%2Freact-api-call","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdmahfuzrp%2Freact-api-call/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdmahfuzrp%2Freact-api-call/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdmahfuzrp%2Freact-api-call/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdmahfuzrp","download_url":"https://codeload.github.com/mdmahfuzrp/react-api-call/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249126099,"owners_count":21216727,"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-call","apicall","apicalls","apis","mahfuzrp","mdmahfuzrp","mrp","next","react","react-api","react-api-call","react-api-hooks","reactapicall","submit-api"],"created_at":"2025-02-23T14:22:58.000Z","updated_at":"2025-04-15T18:20:12.277Z","avatar_url":"https://github.com/mdmahfuzrp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Say Goodbye to Api Headaches: \u003cbr\u003e Effortless Api Call With [react-api-call](https://github.com/mdmahfuzrp/bachelor-task-server)\n\n\u003cimg src=\"https://i.ibb.co/fY3RBWN/reactapicall.png\" alt=\"drawing\"/\u003e\n\nIntroducing react-api-call, the ultimate npm package for effortless API requests. Simplify your development with just 2-3 lines of code to handle GET, POST, PUT, and DELETE operations. This user-friendly API request library enhances your productivity by streamlining best practices for making API calls. Perfect for developers, react api call is the efficient solution you need to boost your projects and improve your coding experience.\n\n#\n\n#### Install react-api-call:\n\n```javascript\nnpm i react-api-call\n```\n\n#\n\n### You can follow this steps for your usecase.\n\n##### Get Method:\n\n```javascript\nimport { useGetMethod } from \"react-api-call\";\n\nconst App = () =\u003e {\n  const { isLoading, refetch, response } = useGetMethod({\n    apiUrl: \"example/api/v1/users\",\n    token: \"your-token\",\n    tokenType: \"Bearer\",\n    headersConfig: {\n      \"Content-type\": \"application/json\",\n    },\n  });\n\n  console.log(response);\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eHello World\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n##### Submit Method:\n\n```javascript\nimport { useSubmitMethod } from \"react-api-call\";\n\nconst App = () =\u003e {\n  const { handleSubmit, isLoading } = useSubmitMethod({\n    token: \"your-token\",\n    tokenType: \"Bearer\",\n    headersConfig: {\n      \"Content-type\": \"application/json\",\n    },\n  });\n\n  const handlePostStatus = async () =\u003e {\n    const postData = {\n      name: \"John Smith\",\n      status: true,\n    };\n\n    const { error, response } = await handleSubmit({\n      url: \"example/api/v1/users\",\n      data: postData,\n    });\n\n    console.log(error, response);\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handlePostStatus}\u003eAdd Status\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n##### Delete Method:\n\n```javascript\nimport { useDeleteMethod } from \"react-api-call\";\n\nconst App = () =\u003e {\n  const { handleDelete, isDeleting } = useDeleteMethod({\n    token: \"your-token\",\n    headersConfig: {\n      \"Content-type\": \"application/json\",\n    },\n    tokenType: \"Bearer\",\n  });\n\n  const handleDeleteStatus = async () =\u003e {\n    const apiUrl = \"example.com/status/1\";\n    await handleDelete({ url: apiUrl });\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleDeleteStatus}\u003eDelete\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Now it's time for manage your cookies\n\n##### Set Cookies:\n\n```javascript\nimport { useCookies } from \"react-api-call\";\n\nconst App = () =\u003e {\n  const { setCookies } = useCookies();\n\n  const handleSetCookies = () =\u003e {\n    // in set cookies you need to pass: name, value, expires in day\n    setCookies(\"admin-token\", token, 7);\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleSetCookies}\u003eSet Token\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n##### Get Cookies:\n\n```javascript\nimport { useCookies } from \"react-api-call\";\n\nconst App = () =\u003e {\n  const { getCookies } = useCookies();\n\n  const handleGetCookies = () =\u003e {\n    // for get cookies value, you need to pass \"name\" only\n    getCookies(\"admin-token\");\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleGetCookies}\u003eGet Token\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n##### Delete Cookies:\n\n```javascript\nimport { useCookies } from \"react-api-call\";\n\nconst App = () =\u003e {\n  const { deleteCookie } = useCookies();\n\n  const handleDeleteCookies = () =\u003e {\n    // for delete cookies you need to pass: \"name\" only\n    deleteCookie(\"admin-token\");\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleDeleteCookies}\u003eDelete Token\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n#\n\n### List of parameters, that you can pass if needed:\n\n| Parameters      | Description                                                                                                                                                                                                                                       | Usecase                                              | Status   | Type       | Default Value    |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------- | ---------- | ---------------- |\n| `token`         | If you need to pass token in your api calls then you can pass this otherwise not.                                                                                                                                                                 | `useGetMethod`, `useSubmitMethod`, `useDeleteMethod` | Optional | `string`   | null             |\n| `tokenType`     | Default tokenType is `Bearer` but if you need to change, then you can pass this parameters with value.                                                                                                                                            | `useGetMethod`, `useSubmitMethod`, `useDeleteMethod` | Optional | `string`   | Bearer           |\n| `headersConfig` | Default is application/json but if needed you change pass this with values.                                                                                                                                                                       | `useGetMethod`, `useSubmitMethod`, `useDeleteMethod` | Optional | `object`   | application/json |\n| `apiUrl`        | Pass your api url in useGetMethod Hooks.                                                                                                                                                                                                          | `useGetMethod`                                       | Required | `string`   | null             |\n| `onError`       | After a submit or delete request, (errors) if you need to show error then you can pass a function in this parameters, and you also get error response in your function what you have pass in this parameters.                                     | `useSubmitMethod`, `useDeleteMethod`                 | Optional | `function` | null             |\n| `onSuccess`     | After a submit or delete request, (success) if you need to show success or showing a alert or something then you can pass a function in this parameters, and you also get success response in your function what you have pass in this parameter. | `useSubmitMethod`, `useDeleteMethod`                 | Optional | `function` | null             |\n| `refetch`       | If after submit or delete you need to refetch or call some api then you can pass function in this parameters.                                                                                                                                     | `useSubmitMethod`, `useDeleteMethod`                 | Optional | `function` | null             |\n| `method`        | For submit request default method is `post` and for delete request default method is `delete` so if you need to change you can pass this parameters with your methods.                                                                            | `useSubmitMethod`, `useDeleteMethod`                 | Optional | `string`   | post \u0026 delete    |\n\n### Contribution From Your End\n\nIf you have confidence to contribute in this package, YOU ARE WELCOME.\n\n#### Todo\n\n- Component mount unmount loading handle for get api\n- Cache in for 5 minutes\n\n##### Author\n\n\u003cimg src=\"https://i.ibb.co/qkphPNz/mdmahfuzrp.png/0/1697224322908?e=1721865600\u0026v=beta\u0026t=0O5OSlO5Fq5mET8ZQLIdfuC3MkixqOInG7UDefTKuWY\" alt=\"drawing\" style=\"width:150px; border-radius:10px;\"/\u003e\n\n```\nMD MAHFUZ RP\nSoftware Engineer \u0026 Tech Entrepreneur\nDeveloper \u0026 Creator of @react-api-call\n```\n\n\u003cdiv align=\"left\"\u003e\n\u003ca href=\"https://fb.com/mdmahfuzrp\" target=\"_blank\"\u003e\u003cimg align=\"center\" src=\"https://i.ibb.co/6bbvqCG/facebook-256x256.png\" alt=\"mdmahfuzrp\" height=\"30\" width=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://instagram.com/mdmahfuzrp\" target=\"_blank\"\u003e\u003cimg align=\"center\" src=\"https://i.ibb.co/tX0CDxd/instagram-256x256.png\" alt=\"mdmahfuzrp\" height=\"30\" width=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/mdmahfuzrp\" target=\"_blank\"\u003e\u003cimg align=\"center\" src=\"https://i.ibb.co/9VDdfFG/twitter-256x256.png\" height=\"30\" width=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/mdmahfuzrp\" target=\"_blank\"\u003e\u003cimg align=\"center\" src=\"https://i.ibb.co/FgZy8DM/linkedin-original-256x256.png\" height=\"30\" width=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://stackoverflow.com/users/22882309/md-mahfuz-rp\" target=\"_blank\"\u003e\u003cimg align=\"center\" src=\"https://i.ibb.co/HH9b9jP/stack-overflow-logo-AC73-FF9063-seeklogo-com.png\" height=\"30\" width=\"30\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdmahfuzrp%2Freact-api-call","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdmahfuzrp%2Freact-api-call","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdmahfuzrp%2Freact-api-call/lists"}