https://github.com/glamboyosa/mey
A react package that exports hooks for handling the request lifecycle.
https://github.com/glamboyosa/mey
data data-fetching fetch hooks react react-native
Last synced: about 1 year ago
JSON representation
A react package that exports hooks for handling the request lifecycle.
- Host: GitHub
- URL: https://github.com/glamboyosa/mey
- Owner: glamboyosa
- Created: 2020-10-19T00:53:42.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-04-21T12:01:32.000Z (about 4 years ago)
- Last Synced: 2025-04-13T22:53:26.999Z (about 1 year ago)
- Topics: data, data-fetching, fetch, hooks, react, react-native
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mey
- Size: 425 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mey
> A react package that exports hooks for handling the request lifecycle
[](https://www.npmjs.com/package/mey) [](https://standardjs.com)
## Motivation
This 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:
- "should i use `useReducer` or `useState` ?"
- "do i have different slices of state or a state object? which is cleaner?"
This package aims to take all that pain away and exports two hooks to handle it all `useFetch` and `useMutation`
## Install
```bash
npm install --save mey
```
```bash
yarn add mey
```
it is written in TypeScript so no need to install types.
## useFetch Usage
```tsx
import { useFetch } from "mey";
const { data, loading, error, refetch } = useFetch(
"https://jsonplaceholder.typicode.com/posts"
);
console.log("the data is:");
console.log(data);
if (!data && loading) {
return
loading ;
}
if (error) {
return {error} ;
}
return {data.map((el: any) => el.title)[0]};
```
## useMutation Usage
```tsx
import {useMutation} from "mey";
const { data, loading, error, handleRequest } = useMutation(
"https://jsonplaceholder.typicode.com/posts", "post"
);
const submitHandler = () => {
const randomNumber = Math.random() * 100;
const body = {
randomNumber
}
handleRequest(body);
};
return (
generate a new random number: {data && !error ? data : error }
click me
)
```
## Typing the response
If 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:
```tsx
import { useFetch } from "mey";
const { data, loading, error, refetch } = useFetch<
{ body: string; userId: number; id: number; title: string }[]
>("https://jsonplaceholder.typicode.com/posts");
console.log("The data is:");
console.log(data);
if (!data && loading) {
return
loading ;
}
if (error) {
return {error} ;
}
return {data.map((el) => el.title)[0]};
```
## Global Config
`Mey` ships with a provider called `MeyProvider` that you would wrap around `` or `` in your root, entry point of your project as the case may be.
`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"
## Global Config Example
```tsx
import "./index.css";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { MeyProvider } from "mey";
ReactDOM.render(
,
document.getElementById("root")
);
```
## Extended useFetch Usage
```tsx
import { useFetch } from "mey";
const { data, loading, error, refetch } = useFetch(
"https://jsonplaceholder.typicode.com/posts",
{
authorization: " bearer authentication-token",
xpth: "xsssf",
}
);
if (!data && loading) {
return
loading ;
}
if (error) {
return {error} ;
}
return {data.map((el: any) => el.title)[0]};
```
## Extended useMutation Usage
```tsx
import {useMutation} from "mey";
const { data, loading, error, handleRequest } = useMutation(
"https://jsonplaceholder.typicode.com/posts", "post", {
authorization: " bearer authentication-token",
xpth: "xsssf",
}
);
const submitHandler = () => {
const randomNumber = Math.random() * 100;
const body = {
randomNumber
}
handleRequest(body);
};
return (
generate a new random number: {data && !error ? data : error }
click me
)
```
## useFetch API
```tsx
const { data, loading, error, refetch } = useFetch(url, headers);
```
### Parameters
- url: the URL path you want to fetch.
- headers: (optional) an object representing the values you want to set on the request header.
### Values
- data: data for the given path.
- loading: a boolean representing whether the request is loading or not.
- error: a string representing a potential error thrown.
- refetch: a function that refetches data.
## useMutation API
```tsx
const { data, loading, error, handleRequest } = useMey(
url,
requestType,
headers
);
```
### Parameters
- url: the URL path you want to fetch.
- requestType: a union of string types representing the type of mutation you want to carry out i.e put, post & delete.
- headers: (optional) an object representing the values you want to set on the request header.
### Values
- data: data for the given path.
- loading: a boolean representing whether the request is loading or not.
- error: a string representing a potential error thrown.
- 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.
## Support
Have a question ? send me an email @ ogbemudiatimothy@gmail.com or hit me up on [twitter](https://twitter.com/glamboyosa).
also feel free to checkout my [portfolio](https://timothyogbemudia.netlify.app)
## License
MIT © [glamboyosa](https://github.com/glamboyosa)