# ⚛️ Table of Contents
- [About the Project](#about-the-project)
- [Tech Stack](#works-on)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Return Type](#usequery-return)
- [Example](#example)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [FAQ](#faq)
- [License](#license)
- [Contact](#contact)
- [Acknowledgements](#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
1. Esay to Use 🧠
2. Fully Type Safety 🌀
3. No Providers and all that sh^t 👌
4. Incredibly Fast 🚀
5. Scalable & Timeless in Development 🕛
## Getting Started
### Prerequisites
Just React Library
### Installation
Install react-qwhy with npm
```bash
npm install react-qwhy
```
Install react-qwhy with yarn
```bash
yarn add react-qwhy
```
Install react-qwhy with pnpm
```bash
pnpm add react-qwhy
```
## Usage
Here's how to use **useQuery**
```typescript
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` | `` or `undefined` |
## Example
```typescript
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("fetch_todos", fetchTodos);
// When fetch progress, display h1 written in it "loading..." //
if (isLoading) return
loading...
;
// return the component //
return (
<>
{data?.map((todo) => (
{todo.title}
completed? {todo.completed ? "Yes" : "No"}
{todo.id}
{todo.userId}
))}
);
}
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](https://www.npmjs.com/~alielmalki) - alielmalki.developer@gmail.com
Project Link: [https://github.com/aliel0malki/react-qwhy](https://github.com/aliel0malki/react-qwhy)
## Acknowledgements
useful resources and libraries we have used in react-qwhy.
- [React](https://react.dev/)
- [Vite](https://vitejs.dev/)
- [Vitest](https://vitest.dev)
- [RollUp](https://rollup.dev)
---
_Source: https://npm.io/package/react-qwhy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
