{"id":17676272,"url":"https://github.com/glamboyosa/mey","last_synced_at":"2025-05-12T21:26:26.375Z","repository":{"id":57296049,"uuid":"305226882","full_name":"glamboyosa/mey","owner":"glamboyosa","description":"A react package that exports hooks for handling the request lifecycle.","archived":false,"fork":false,"pushed_at":"2022-04-21T12:01:32.000Z","size":435,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T22:53:26.999Z","etag":null,"topics":["data","data-fetching","fetch","hooks","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/mey","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/glamboyosa.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":"2020-10-19T00:53:42.000Z","updated_at":"2024-08-06T14:04:52.000Z","dependencies_parsed_at":"2022-09-04T08:00:30.148Z","dependency_job_id":null,"html_url":"https://github.com/glamboyosa/mey","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/glamboyosa%2Fmey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glamboyosa%2Fmey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glamboyosa%2Fmey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glamboyosa%2Fmey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glamboyosa","download_url":"https://codeload.github.com/glamboyosa/mey/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253824353,"owners_count":21970005,"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":["data","data-fetching","fetch","hooks","react","react-native"],"created_at":"2024-10-24T07:24:58.702Z","updated_at":"2025-05-12T21:26:26.330Z","avatar_url":"https://github.com/glamboyosa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mey\n\n\u003e A react package that exports hooks for handling the request lifecycle\n\n[![NPM](https://img.shields.io/npm/v/mey.svg)](https://www.npmjs.com/package/mey) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Motivation\n\nThis package was created for people who don't want to go through the chore of handling the request lifecycle but don't want to reach for a big data fetching library. A lot of people do not need the complexity of a big library, the project's aren't complex enough to warrant such overhead but equally are tired of handling the request lifecycle and the questions that come with it such as:\n\n- \"should i use `useReducer` or `useState` ?\"\n- \"do i have different slices of state or a state object? which is cleaner?\"\n  This package aims to take all that pain away and exports two hooks to handle it all `useFetch` and `useMutation`\n\n## Install\n\n```bash\nnpm install --save mey\n```\n\n```bash\nyarn add mey\n```\n\nit is written in TypeScript so no need to install types.\n\n## useFetch Usage\n\n```tsx\nimport { useFetch } from \"mey\";\n\nconst { data, loading, error, refetch } = useFetch(\n  \"https://jsonplaceholder.typicode.com/posts\"\n);\nconsole.log(\"the data is:\");\nconsole.log(data);\nif (!data \u0026\u0026 loading) {\n  return \u003cdiv\u003e loading \u003c/div\u003e;\n}\nif (error) {\n  return \u003cdiv\u003e {error} \u003c/div\u003e;\n}\nreturn \u003cdiv\u003e{data.map((el: any) =\u003e el.title)[0]}\u003c/div\u003e;\n```\n\n## useMutation Usage\n\n```tsx\nimport  {useMutation}  from \"mey\";\n\nconst { data, loading, error, handleRequest } = useMutation(\n  \"https://jsonplaceholder.typicode.com/posts\", \"post\"\n);\nconst submitHandler = () =\u003e {\nconst randomNumber = Math.random() * 100;\nconst body = {\n  randomNumber\n}\nhandleRequest(body);\n};\nreturn (\n  \u003cdiv\u003e\n  \u003cp\u003e generate a new random number: {data \u0026\u0026 !error ? data : error } \u003c/p\u003e\n  \u003cbutton disabled={loading} onClick={submitHandler}\u003e click me \u003c/button\u003e\n)\n\n```\n\n## Typing the response\n\nIf you want your response typed both `useFetch` and `useMutation` accept a generic in which you'd pass in the type. You can view in [`example/src/index.tsx`](https://github.com/glamboyosa/mey/blob/master/example/src/index.tsx) or an example `useFetch` implementation down below:\n\n```tsx\nimport { useFetch } from \"mey\";\nconst { data, loading, error, refetch } = useFetch\u003c\n  { body: string; userId: number; id: number; title: string }[]\n\u003e(\"https://jsonplaceholder.typicode.com/posts\");\nconsole.log(\"The data is:\");\nconsole.log(data);\nif (!data \u0026\u0026 loading) {\n  return \u003cdiv\u003e loading \u003c/div\u003e;\n}\nif (error) {\n  return \u003cdiv\u003e {error} \u003c/div\u003e;\n}\nreturn \u003cdiv\u003e{data.map((el) =\u003e el.title)[0]}\u003c/div\u003e;\n```\n\n## Global Config\n\n`Mey` ships with a provider called `MeyProvider` that you would wrap around `\u003cApp/\u003e` or `\u003cComponent/\u003e` in your root, entry point of your project as the case may be.\n`MeyProvider` accepts a single prop `BaseURL` that is the primary URL you would be making calls to. the point is to eliminate typing the same base path in every component that uses a hook. you'd simply now pass the path you're trying to hit e.g \"/posts\" which would translate to \"https://yourbasepath.com/posts\"\n\n## Global Config Example\n\n```tsx\nimport \"./index.css\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport { MeyProvider } from \"mey\";\nReactDOM.render(\n  \u003cMeyProvider BaseURL=\"https://yourbasepath.com\"\u003e\n    \u003cApp /\u003e\n  \u003c/MeyProvider\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n## Extended useFetch Usage\n\n```tsx\nimport { useFetch } from \"mey\";\n\nconst { data, loading, error, refetch } = useFetch(\n  \"https://jsonplaceholder.typicode.com/posts\",\n  {\n    authorization: \" bearer authentication-token\",\n    xpth: \"xsssf\",\n  }\n);\nif (!data \u0026\u0026 loading) {\n  return \u003cdiv\u003e loading \u003c/div\u003e;\n}\nif (error) {\n  return \u003cdiv\u003e {error} \u003c/div\u003e;\n}\nreturn \u003cdiv\u003e{data.map((el: any) =\u003e el.title)[0]}\u003c/div\u003e;\n```\n\n## Extended useMutation Usage\n\n```tsx\nimport  {useMutation}  from \"mey\";\n\nconst { data, loading, error, handleRequest } = useMutation(\n  \"https://jsonplaceholder.typicode.com/posts\", \"post\", {\n    authorization: \" bearer authentication-token\",\n    xpth: \"xsssf\",\n  }\n);\nconst submitHandler = () =\u003e {\nconst randomNumber = Math.random() * 100;\nconst body = {\n  randomNumber\n}\nhandleRequest(body);\n};\nreturn (\n  \u003cdiv\u003e\n  \u003cp\u003e generate a new random number: {data \u0026\u0026 !error ? data : error } \u003c/p\u003e\n  \u003cbutton disabled={loading} onClick={submitHandler}\u003e click me \u003c/button\u003e\n)\n\n```\n\n## useFetch API\n\n```tsx\nconst { data, loading, error, refetch } = useFetch(url, headers);\n```\n\n### Parameters\n\n- url: the URL path you want to fetch.\n- headers: (optional) an object representing the values you want to set on the request header.\n\n### Values\n\n- data: data for the given path.\n- loading: a boolean representing whether the request is loading or not.\n- error: a string representing a potential error thrown.\n- refetch: a function that refetches data.\n\n## useMutation API\n\n```tsx\nconst { data, loading, error, handleRequest } = useMey(\n  url,\n  requestType,\n  headers\n);\n```\n\n### Parameters\n\n- url: the URL path you want to fetch.\n- requestType: a union of string types representing the type of mutation you want to carry out i.e put, post \u0026 delete.\n- headers: (optional) an object representing the values you want to set on the request header.\n\n### Values\n\n- data: data for the given path.\n- loading: a boolean representing whether the request is loading or not.\n- error: a string representing a potential error thrown.\n- handleRequest: a function that handles dispatching requests. it accepts a `body` value. if the `body` value is not an object it stops execution and prints an error message to the console.\n\n## Support\n\nHave a question ? send me an email @ ogbemudiatimothy@gmail.com or hit me up on [twitter](https://twitter.com/glamboyosa).\nalso feel free to checkout my [portfolio](https://timothyogbemudia.netlify.app) \n\n## License\n\nMIT © [glamboyosa](https://github.com/glamboyosa)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglamboyosa%2Fmey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglamboyosa%2Fmey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglamboyosa%2Fmey/lists"}