Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dickyrdiar/starfetching
"React hook library for easy API fetching management."
https://github.com/dickyrdiar/starfetching
context-api fetch-api hooks hooks-api-react npm-package react-library reactjs
Last synced: 5 days ago
JSON representation
"React hook library for easy API fetching management."
- Host: GitHub
- URL: https://github.com/dickyrdiar/starfetching
- Owner: Dickyrdiar
- Created: 2024-12-02T02:58:15.000Z (about 1 month ago)
- Default Branch: development
- Last Pushed: 2024-12-29T05:23:28.000Z (12 days ago)
- Last Synced: 2024-12-29T06:26:50.271Z (12 days ago)
- Topics: context-api, fetch-api, hooks, hooks-api-react, npm-package, react-library, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/startfetch
- Size: 566 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# StartFetch Library
## Overview
StartFetch is a React library that provides a context and hooks for managing API calls and their states (loading, error, and data). It includes a wrapping component that simplifies the process of fetching data from APIs.
## Installation
To install the StartFetch library, you can use npm or yarn:
```bash
npm install startfetch
```
or
```bash
yarn add startfetch
```
## Usage
### WrappingComponent
The `WrappingComponent` is a context provider that wraps your application or component tree. It provides the API context to its children.
```tsx
import React from 'react';
import { WrappingComponent } from 'startfetch';
const App = () => (
);
export default App;
```
### useFetch Hook
The `useFetch` hook allows you to access the API context within your components.
```tsx
import React from 'react';
import { useFetch } from 'startfetch';
const YourComponent = () => {
const { response, loading, error } = useFetch('https://api.example.com/data', 'GET');
if (loading) return
Loading...;
if (error) return Error: {error};
return (
{JSON.stringify(response, null, 2)}
);
};
export default YourComponent;
```
# StartFetch Library
[Previous sections remain unchanged...]
### useFetchIf Hook
The `useFetchIf` hook allows you to conditionally fetch data based on a condition. Here are examples for different HTTP methods:
#### GET Request
```tsx
import React, { useState } from 'react';
import { useFetchIf } from 'startfetch';
const GetComponent = () => {
const [startFetching, setStartFetching] = useState(false);
const { response, loading, error } = useFetchIf(
"https://sw-api.starnavi.io/planets",
"GET",
null,
startFetching
);
const handleClick = () => {
setStartFetching(true);
};
if (loading) return
Loading...;
if (error) return Error: {error};
return (
Fetch Data
{JSON.stringify(response, null, 2)}
);
};
```
#### POST Request
```tsx
import React, { useState } from 'react';
import { useFetchIf } from 'startfetch';
const PostComponent = () => {
const [shouldFetch, setShouldFetch] = useState(false);
const requestBody = {
title: 'New Item',
description: 'Description here'
};
const { response, loading, error } = useFetchIf(
'https://api.example.com/items',
'POST',
shouldFetch,
requestBody
);
const handleSubmit = () => {
setShouldFetch(true);
};
if (loading) return
Loading...;
if (error) return Error: {error};
return (
Create Item
{response && Successfully created!}
);
};
```
#### PUT Request
```tsx
import React, { useState } from 'react';
import { useFetchIf } from 'startfetch';
const PutComponent = () => {
const [shouldFetch, setShouldFetch] = useState(false);
const requestBody = {
id: 1,
title: 'Updated Item',
description: 'Updated description'
};
const { response, loading, error } = useFetchIf(
'https://api.example.com/items/1',
'PUT',
shouldFetch,
requestBody
);
const handleUpdate = () => {
setShouldFetch(true);
};
if (loading) return
Loading...;
if (error) return Error: {error};
return (
Update Item
{response && Successfully updated!}
);
};
```
#### DELETE Request
```tsx
import React, { useState } from 'react';
import { useFetchIf } from 'startfetch';
const DeleteComponent = () => {
const [shouldFetch, setShouldFetch] = useState(false);
const { response, loading, error } = useFetchIf(
'https://api.example.com/items/1',
'DELETE',
shouldFetch
);
const handleDelete = () => {
setShouldFetch(true);
};
if (loading) return
Loading...;
if (error) return Error: {error};
return (
Delete Item
{response && Successfully deleted!}
);
};
```
## API
### WrappingComponent Props
- `children`: The components that will have access to the API context.
### Hook Return Values
Both `useFetch` and `useFetchIf` hooks provide the following values:
- `response`: The data received from the API.
- `loading`: A boolean indicating if the request is currently in progress.
- `error`: An error message if the request failed.
### useFetchIf Parameters
The `useFetchIf` hook accepts the following parameters:
- `url` (string): The API endpoint URL
- `method` (string): The HTTP method ('GET', 'POST', 'PUT', 'DELETE')
- `condition` (boolean): Whether to execute the request
- `body` (optional object): The request body for POST and PUT requests
## License
This project is licensed under the MIT License.