Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmzaghlool/react-usefetch-with-models
A quick way to bind your react/react native code with predefined useFetches.
https://github.com/mmzaghlool/react-usefetch-with-models
customhooks models nextjs react react-native reactjs usefetch
Last synced: about 1 month ago
JSON representation
A quick way to bind your react/react native code with predefined useFetches.
- Host: GitHub
- URL: https://github.com/mmzaghlool/react-usefetch-with-models
- Owner: mmzaghlool
- License: mit
- Created: 2021-09-16T20:12:13.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-18T06:56:55.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T18:09:09.294Z (about 2 months ago)
- Topics: customhooks, models, nextjs, react, react-native, reactjs, usefetch
- Language: TypeScript
- Homepage:
- Size: 98.6 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# React useFetch Models
A quick way to bind your react/react native code with predefined useFetches.
Compatible with JS and TS
## [Reach Me](reach-me)
If you need to report an issue or have suggestions feel free to contact me
## [Installation](installation)
```bash
npm i react-usefetch-models
```
## [Initiating Project configs](initiating-project-configs)
```ts
import {BackendCall} from 'react-usefetch-models';
// API Backend base url
const baseApiUrl = '';
// Default Headers containing headers to be set by default to any request unless it overwritten
const defaultHeaders = {};
/**
* Function to be executed after the success and do whatever you want
* @param {any} res
*/
async function defaultSuccessFunction(res: any): Promise {
return res;
}
/**
* Function to be executed after the catching the error and do whatever you want
* @param {any} err the error as a first and only parameter
* @return {any} Whatever u want to be in the rejected state
*/
async function defaultErrorFunction(err: any): Promise {
return err;
}
const Backend = new BackendCall(
baseApiUrl,
defaultHeaders,
defaultSuccessFunction,
defaultErrorFunction,
/**
* OPTIONAL you can pass a configs that controls if the useFetch should return the data as Promise or not
* Default is {promiseReject: true, promiseResolve: true}
*
* if promiseReject
*/
{promiseReject: true, promiseResolve: true},
);
export default Backend;
```
## [Models](models)
```ts
import Backend from './Backend';
/**
* Type to validate the execute input when being used
* The optional values indicating that this variable already have a default valid value
* This should contain any required data to be provided at execution (params, query params, body)
*/
export type loginUserType = {variable: string; bodyVariable?: string; bodyVariable2: number; queryVariable: string};
/**
*
*/
export type loginUserResponseType = {variable: string};
export type getUserType = {uid: string};
class TestModel {
loginUser() {
// if other data passed to execute it will override this data, but it must have a default value here
const bodyDefault = {
bodyVariable: 'This is a default body variable',
bodyVariable2: '',
};
// if other data passed to execute it will override this data, but it must have a default value here
const queryDefault = {
queryVariable: '',
};
/**
* You can set variable in the routs using `:` before the variable name
* and provide it's value at the execution
* don't forget to put it at the type
*/
const endPoint = 'path/to/your/endpoint/:variable';
/**
* You have a collection of functions like (postData, getData, updateData, patchData, deleteData, and custom)
* Note that `getData` function can not have a body
* and in the `custom` you can provide your method
*
* If you need to specify custom useFetchConfig for specific function you can pass `useFetchCustomConfig`
*/
return Backend.postData({
endPoint,
bodyDefault,
queryDefault,
useFetchCustomConfig: {promiseReject: false, promiseResolve: false},
});
}
getUser() {
/**
* You can set variable in the routs using `:` before the variable name
* and provide it's value at the execution
* don't forget to put it at the type
*/
const endPoint = 'path/to/your/endpoint/:uid';
/**
* Note that `getData` function can not have a body
*/
return Backend.getData({endPoint});
}
}
export default TestModel;
```
## [Usage](usage)
```ts
import React from 'react';
import TestModel from './Model';
const model = new TestModel();
const Footer: React.FC = () => {
/**
* Every method returns useFetch after execution
* every useFetch has 4 positional parameters (loading, execute, data, error)
*
* data here "dataLogin" will take the "loginUserResponseType" pre defined in the Model
*/
const [loadingLogin, executeLogin, dataLogin, errorLogin] = model.loginUser();
// you can also use it with the shorthand and use the data or error as promises
const [loadingShort, executeShort] = model.getUser();
// ...Other code
const someFunction = () => {
executeLogin({bodyVariable2: 10, queryVariable: '', variable: ''});
/**
* res here will be "any" because it's not defined in the Model
*/
executeShort({uid: ''})
.then((res) => {})
.catch((err) => {});
};
return
;
};
```