{"id":15296067,"url":"https://github.com/mmzaghlool/react-usefetch-with-models","last_synced_at":"2026-02-16T10:39:15.217Z","repository":{"id":57347250,"uuid":"407301472","full_name":"mmzaghlool/React-useFetch-with-Models","owner":"mmzaghlool","description":"A quick way to bind your react/react native code with predefined useFetches.","archived":false,"fork":false,"pushed_at":"2022-12-18T06:56:55.000Z","size":101,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T10:21:18.562Z","etag":null,"topics":["customhooks","models","nextjs","react","react-native","reactjs","usefetch"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/mmzaghlool.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}},"created_at":"2021-09-16T20:12:13.000Z","updated_at":"2023-03-07T04:07:26.000Z","dependencies_parsed_at":"2023-01-29T18:35:11.299Z","dependency_job_id":null,"html_url":"https://github.com/mmzaghlool/React-useFetch-with-Models","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/mmzaghlool%2FReact-useFetch-with-Models","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmzaghlool%2FReact-useFetch-with-Models/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmzaghlool%2FReact-useFetch-with-Models/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmzaghlool%2FReact-useFetch-with-Models/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmzaghlool","download_url":"https://codeload.github.com/mmzaghlool/React-useFetch-with-Models/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248770460,"owners_count":21158982,"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":["customhooks","models","nextjs","react","react-native","reactjs","usefetch"],"created_at":"2024-09-30T18:09:11.980Z","updated_at":"2025-10-06T02:50:07.528Z","avatar_url":"https://github.com/mmzaghlool.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React useFetch Models\n\n![NPM](https://img.shields.io/npm/v/react-usefetch-models)\n![NPM](https://img.shields.io/npm/dt/react-usefetch-models)\n![NPM](https://img.shields.io/npm/dm/react-usefetch-models)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-usefetch-models)\n\nA quick way to bind your react/react native code with predefined useFetches.\n\nCompatible with JS and TS\n\n## [Reach Me](reach-me)\n\nIf you need to report an issue or have suggestions feel free to contact me\n\n\u003ca href=\"https://www.linkedin.com/in/mmzaghlool/\"\u003e\u003cimg align=\"center\" src=\"https://icon-library.com/images/linkedin-icon-png-transparent-background/linkedin-icon-png-transparent-background-15.jpg\" alt=\"LinkedIn profile\" height=\"40\" width=\"40\" /\u003e\u003c/a\u003e\n\u003ca href=\"mailto:mmzaghlool52@gmail.com\"\u003e\u003cimg align=\"center\" src=\"https://cdn.iconscout.com/icon/free/png-256/gmail-2981844-2476484.png\" alt=\"Gmail account\" height=\"40\" width=\"40\" /\u003e\u003c/a\u003e\n\n## [Installation](installation)\n\n```bash\nnpm i react-usefetch-models\n```\n\n## [Initiating Project configs](initiating-project-configs)\n\n```ts\nimport {BackendCall} from 'react-usefetch-models';\n\n//  API Backend base url\nconst baseApiUrl = '';\n\n// Default Headers containing headers to be set by default to any request unless it overwritten\nconst defaultHeaders = {};\n\n/**\n * Function to be executed after the success and do whatever you want\n * @param {any} res\n */\nasync function defaultSuccessFunction(res: any): Promise\u003cany\u003e {\n    return res;\n}\n\n/**\n * Function to be executed after the catching the error and do whatever you want\n * @param {any} err the error as a first and only parameter\n * @return {any} Whatever u want to be in the rejected state\n */\nasync function defaultErrorFunction(err: any): Promise\u003cany\u003e {\n    return err;\n}\n\nconst Backend = new BackendCall(\n    baseApiUrl,\n    defaultHeaders,\n    defaultSuccessFunction,\n    defaultErrorFunction,\n    /**\n     * OPTIONAL you can pass a configs that controls if the useFetch should return the data as Promise or not\n     * Default is {promiseReject: true, promiseResolve: true}\n     *\n     * if promiseReject\n     */\n    {promiseReject: true, promiseResolve: true},\n);\n\nexport default Backend;\n```\n\n## [Models](models)\n\n```ts\nimport Backend from './Backend';\n\n/**\n * Type to validate the execute input when being used\n * The optional values indicating that this variable already have a default valid value\n * This should contain any required data to be provided at execution (params, query params, body)\n */\nexport type loginUserType = {variable: string; bodyVariable?: string; bodyVariable2: number; queryVariable: string};\n\n/**\n *\n */\nexport type loginUserResponseType = {variable: string};\n\nexport type getUserType = {uid: string};\n\nclass TestModel {\n    loginUser() {\n        // if other data passed to execute it will override this data, but it must have a default value here\n        const bodyDefault = {\n            bodyVariable: 'This is a default body variable',\n            bodyVariable2: '',\n        };\n\n        // if other data passed to execute it will override this data, but it must have a default value here\n        const queryDefault = {\n            queryVariable: '',\n        };\n\n        /**\n         * You can set variable in the routs using `:` before the variable name\n         * and provide it's value at the execution\n         * don't forget to put it at the type\n         */\n        const endPoint = 'path/to/your/endpoint/:variable';\n\n        /**\n         * You have a collection of functions like (postData, getData, updateData, patchData, deleteData, and custom)\n         * Note that `getData` function can not have a body\n         * and in the `custom` you can provide your method\n         *\n         * If you need to specify custom useFetchConfig for specific function you can pass `useFetchCustomConfig`\n         */\n        return Backend.postData\u003cloginUserType, loginUserResponseType\u003e({\n            endPoint,\n            bodyDefault,\n            queryDefault,\n            useFetchCustomConfig: {promiseReject: false, promiseResolve: false},\n        });\n    }\n\n    getUser() {\n        /**\n         * You can set variable in the routs using `:` before the variable name\n         * and provide it's value at the execution\n         * don't forget to put it at the type\n         */\n        const endPoint = 'path/to/your/endpoint/:uid';\n\n        /**\n         * Note that `getData` function can not have a body\n         */\n        return Backend.getData\u003cgetUserType\u003e({endPoint});\n    }\n}\n\nexport default TestModel;\n```\n\n## [Usage](usage)\n\n```ts\nimport React from 'react';\nimport TestModel from './Model';\n\nconst model = new TestModel();\n\nconst Footer: React.FC = () =\u003e {\n    /**\n     * Every method returns useFetch after execution\n     * every useFetch has 4 positional parameters (loading, execute, data, error)\n     *\n     * data here \"dataLogin\" will take the \"loginUserResponseType\" pre defined in the Model\n     */\n    const [loadingLogin, executeLogin, dataLogin, errorLogin] = model.loginUser();\n\n    // you can also use it with the shorthand and use the data or error as promises\n    const [loadingShort, executeShort] = model.getUser();\n\n    // ...Other code\n\n    const someFunction = () =\u003e {\n        executeLogin({bodyVariable2: 10, queryVariable: '', variable: ''});\n\n        /**\n         * res here will be \"any\" because it's not defined in the Model\n         */\n        executeShort({uid: ''})\n            .then((res) =\u003e {})\n            .catch((err) =\u003e {});\n    };\n\n    return \u003cdiv /\u003e;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmzaghlool%2Freact-usefetch-with-models","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmzaghlool%2Freact-usefetch-with-models","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmzaghlool%2Freact-usefetch-with-models/lists"}