react-qwhy
v0.3.0
Published
a react library for fetch data fast and easy
Downloads
6
Maintainers
Readme
please give us a star and if you want to contributing we will be grateful to you
🚧 IMPORTANT 🚧
react-qwhy is not ready to production
⚛️ Table of Contents
- About the Project
- Tech Stack
- Features
- Getting Started
- Usage
- Roadmap
- Contributing
- FAQ
- License
- Contact
- Acknowledgements
About the Project
I was and still am using react-query, but it is difficult to install and setup the environment, so I thought of building my own library, developing it, and using it in my projects, so react-qwhy appeared.
Works On
Features
- Esay to Use 🧠
- Fully Type Safety 🌀
- No Providers and all that sh^t 👌
- Incredibly Fast 🚀
- Scalable & Timeless in Development 🕛
Getting Started
Prerequisites
Just React Library
Installation
Install react-qwhy with npm
npm install react-qwhy
Install react-qwhy with yarn
yarn add react-qwhy
Install react-qwhy with pnpm
pnpm add react-qwhy
Usage
Here's how to use useQuery
import { useQuery } from "react-qwhy";
function yourComponent() {
...
// return params
const {} = useQuery(qName: string, qFn: Function)
...
return ...;
}
useQuery Return
| Variable | Return Type |
| ----------- | -------------------------------- |
| status
| number
|
| isLoading
| boolean
|
| error
| any
|
| data
| <ResultProps[]>
or undefined
|
Example
import { useQuery } from "../dist/index";
// todo interface //
type TodoProps = {
userId: number;
id: number;
title: string;
completed: boolean;
};
// fetch function //
const fetchTodos = async () => {
const req = await fetch("https://jsonplaceholder.typicode.com/todos");
const res = await req.json();
return res;
};
function App() {
/*
* Fetch todos from [ JsonPlaceholder ]
* Pass TodoProps as [] to useQuery()
* Pass a name & query function to useQuery()
*/
const { data, isLoading } = useQuery<TodoProps[]>("fetch_todos", fetchTodos);
// When fetch progress, display h1 written in it "loading..." //
if (isLoading) return <h1>loading...</h1>;
// return the component //
return (
<>
<ul>
{data?.map((todo) => (
<li key={todo.id}>
<h1>{todo.title}</h1>
<h5>completed? {todo.completed ? "Yes" : "No"}</h5>
<h5>{todo.id}</h5>
<span>{todo.userId}</span>
</li>
))}
</ul>
</>
);
}
export default App;
Roadmap
- [ working on ] useMutation 🔥
- [ X ] State Management 🐐
- [ Y ] Support
Contributing
Contributions are always welcome! 😇
See contributing.md
for ways to get started.
FAQ
it's work on react-native?
- Yes
why I use this instead of react-query?
- Use whatever you want. 🤷
License
Distributed under the no License. See LICENSE.txt for more information.
Contact
Ali Elmalki - @npm - [email protected]
Project Link: https://github.com/aliel0malki/react-qwhy
Acknowledgements
useful resources and libraries we have used in react-qwhy.