{"_id":"@akishichinibu/react-requests-hook","_rev":"1-a554d7484770b7d2b712b97cdb9c9d04","name":"@akishichinibu/react-requests-hook","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@akishichinibu/react-requests-hook","version":"0.0.1","description":"A react hook library help you manage your api requests in componment.","main":"lib/index.js","scripts":{"test":"jest","tsc":"tsc","clean":"rm -rf lib","emit":"tsc --emitDeclarationOnly","bundle":"ts-node build.config.ts","build":"npm run clean; npm run bundle","ts-node":"ts-node"},"author":{"name":"akishichinibu@gmail.com"},"license":"MIT","dependencies":{"axios":"^0.24.0"},"devDependencies":{"@babel/preset-env":"^7.16.4","@babel/preset-react":"^7.16.0","@testing-library/jest-dom":"^5.15.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.3","@types/node":"^15.12.4","@types/react":"^17.0.11","@types/react-dom":"^17.0.8","@types/react-test-renderer":"^17.0.1","@types/webpack":"^5.28.0","@types/webpack-dev-server":"^3.11.4","@typescript-eslint/eslint-plugin":"^5.4.0","@typescript-eslint/parser":"^5.4.0","babel-jest":"^27.3.1","esbuild":"^0.14.2","esbuild-plugin-d.ts":"^1.1.0","eslint":"^8.3.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","jest":"^27.3.1","msw":"^0.35.0","react-test-renderer":"^17.0.2","ts-jest":"^27.0.7","ts-loader":"^9.2.3","ts-node":"^10.0.0","tsconfig-paths":"^3.12.0","typescript":"^4.3.4","webpack-cli":"^4.7.2","webpack-dev-server":"^3.11.2"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"types":"./lib/index.d.ts","gitHead":"b0f9e6619b5439a5b4bc495b0b7c5b5cdb82d5a6","_id":"@akishichinibu/react-requests-hook@0.0.1","_nodeVersion":"16.4.1","_npmVersion":"8.1.4","dist":{"integrity":"sha512-z5dcOc4aZ02oQw5GS3mpKzpAecS8gXl/lNMOpsWFfxZyVDz/w5hYT6F+qDX281bOrHbZvtajRjb/PwLF4lV19w==","shasum":"10d179dbcd6f1a8ac0d8cabceed6462f042c16fe","tarball":"https://registry.npmjs.org/@akishichinibu/react-requests-hook/-/react-requests-hook-0.0.1.tgz","fileCount":25,"unpackedSize":25438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxG1JCRA9TVsSAnZWagAA1mIP/Rk607hapzWoGhHpF+XI\nLMNZ4PwoMzBjQK0I+hD8poGP6XDF+NOPz5nHbmcozAvpllTlXTbd6inNhCeQ\nYGjoOlj2eK2V6famfVuMjnk4Flw5MmokRDIjCZTkC7AFTsy0OECM2w+HY8ud\nALtEpPMAoUh8xpyx+F3+GipFgG4o3NDgTZenTmAJ2OgxebnG1yGsrzQI5ESQ\nY6qB7jpid/s19E+c/f9er9emIjCeynjqBfKc5yxr9TsJV1lEEUUKCPGoZtXm\naCulw1g9FbqTbQQ2ZIo/CxXZrY0EmfMO9ARO1ZQkjwhkxRySaeGucaUcm9Yc\n7qcK8vJiNjkORmkl+J/FcGoNuTAyu9MYQFVRxmjnusLb5unLmFdl2iSS82rX\nPOhvNCXvOo3DkPc4ebOUBqqcMYaDrev45y+DYtsj8EE/ZX1jKJ6DSkUSJt2v\nNLeNWNQRLYMPhttTA5d4qPATk4zAxPcoXpF2M7n8NgytclAh2ypkwMPS4JZq\n2zKXmcu90IQdtcJoXNyNfTbM0r5UpRMLpGENdxe6rYekwpekIVxgRiLrcdGZ\nrPVRun+mhCHE3NpWOSSDlJlcCbjAzdb04g1KFKJJAonEbokk5tNOi9+KwYkL\nGsUDOPa5szY7oCCZKAAGdGbNnw2JwXnJBjuOzmr2WfEzJAI6UgChOtx8ICuA\nkPWo\r\n=3fSO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2uqPhb06uixqvmbWQLCLhUXJo9OzyKak+vpXy9svEjgIgZJMD9jH7yqXjBaVhav+UR+qK+/N6mp83ZApR1jC0Qk0="}]},"_npmUser":{"name":"akishichinibu","email":"akishichinibu@gmail.com"},"directories":{},"maintainers":[{"name":"akishichinibu","email":"akishichinibu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-requests-hook_0.0.1_1640262985830_0.20974893526981764"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-23T12:36:25.774Z","0.0.1":"2021-12-23T12:36:25.996Z","modified":"2022-04-04T12:29:47.420Z"},"maintainers":[{"name":"akishichinibu","email":"akishichinibu@gmail.com"}],"description":"A react hook library help you manage your api requests in componment.","author":{"name":"akishichinibu@gmail.com"},"license":"MIT","readme":"# react-requests-hook\n\nA react hook library help you manage your api requests in componment. \n\n## Example\n![alt text](https://github.com/akishichinibu/react-requests-hook/raw/main/doc/images/example_1.gif \"Example 1\")\n\n```jsx\nimport { configUseRequest, axiosPreset } from \"react-hook-requests\";\n\n// Create an axios instance, and config it as what you want, like baseUrl, credential, error handler, etc\nconst a = axios.create();\n// Use the axios preset for restful api requests using the prepared axios instance\nconfigUseRequest(axiosPreset(a));\n\nconst ApiListDemo: FC = () => {\n  const [state, dispatcher] = useReducer(reducer, null, () => ({\n    userId: null,\n    offset: null,\n    limit: null,\n  }));\n\n  const buildRequestUrl = useCallback(() => {\n    const query = Object.entries(state).filter(([_, v]) => v !== null).map(([k, v]) => `${k}=${v}`).join(\"&\");\n\n    let url = \"/api/posts\";\n\n    if (query.length > 0) {\n      url += `?${query}`;\n    }\n\n    return url;\n  }, [state]);\n\n  const listRequestUrl = buildRequestUrl();\n\n  // Create a pend request here\n  const { payload, progress, isLoading, refresh } = useGet<Post[]>({ initialUrl: listRequestUrl });\n\n  return (\n    <section className=\"container demo-api-list\">\n      <div>\n\n        <div className='header'>\n          <NumberInput htmlId='params-user-id' label='UserId' onChange={(v) => dispatcher([\"userId\", v])}></NumberInput>\n          <NumberInput htmlId='params-limit' label='Limit' onChange={(v) => dispatcher([\"limit\", v])}></NumberInput>\n          <NumberInput htmlId='params-offset' label='Offset' onChange={(v) => dispatcher([\"offset\", v])}></NumberInput>\n        </div>\n\n        <div>\n          <span>The request will be send to <strong>{listRequestUrl}</strong> if you click `refresh` button. </span>\n        </div>\n\n        <div>\n          <div>\n            <span>Progress</span>\n            <span>{progress * 100}%</span>\n          </div>\n          <div>\n            {/* Call the refresh here to resend the request */}\n            <Button text='refresh' onClick={() => refresh({ newUrl: listRequestUrl })}></Button>\n          </div>\n        </div>\n\n      </div>\n      {isLoading ? <Loading /> : <Table headers={headers} data={payload?.slice(state.offset ?? undefined, (state.offset === null || state.limit === null ? undefined : state.offset + state.limit)) ?? []} />}\n    </section>\n  );\n}\n```\n\n\nThe previous example can be found in `example/`. \n","readmeFilename":"README.md"}