https://github.com/andre-krueger/react-use-with-resources
A hook to fetch data.
https://github.com/andre-krueger/react-use-with-resources
react react-native react-navigation react-router
Last synced: 3 months ago
JSON representation
A hook to fetch data.
- Host: GitHub
- URL: https://github.com/andre-krueger/react-use-with-resources
- Owner: andre-krueger
- License: mit
- Created: 2020-12-13T20:47:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-25T08:41:51.000Z (over 5 years ago)
- Last Synced: 2025-08-02T13:07:50.222Z (11 months ago)
- Topics: react, react-native, react-navigation, react-router
- Language: TypeScript
- Homepage:
- Size: 108 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-use-with-resources)
# Installation
```
npm i --save react-use-with-resources
```
# Usage
This library can be used in `React` and `React Native` apps. There is an [example](/example/todo-app) that is using `React Router` to showcase the library's features. The example contains cancellation via `AbortController` for `fetch` and uses `Mobx` as the in-memory data storage and also shows an example of error handling via `ErrorBoundary`.
In general, `react-use-with-resources` works best with global state management libraries like `Redux` or `Mobx`, as `react-use-with-resources` doesn't have any caching capabilities.
If you don't need caching, you can of course also use local state for the `fetch` results and just don't set any `TTL`. Then the data will be fetched on each mount.
To give a brief overview:
- You can set multiple resources that need to be resolved
- The hook returns error and loading props, named accordingly to the name you gave to the resources
- The error props can be typed, by providing an `ErrorMap` type to the hook
- For each resource, you can define an optional `TTL`
- The hook exposes a `refresh` function, with which you can either refresh all resources, or specific ones
- The data fetching can bo done manually, if you wish so. Just use `setRefreshRequested(true)` which is returned from `useWithResourcesBase` whenever you want to fetch
If you need more trigger conditions, you can use the following example (for React Navigation):
```javascript
import {
useWithResourcesBase,
UseWithResourcesProps,
Actions,
} from "react-use-with-resources";
import { useFocusEffect, useIsFocused } from "@react-navigation/native";
import { useEffect, useMemo } from "react";
import { AppState, AppStateStatus } from "react-native";
export function useWithResources(
actions: Actions
): UseWithResourcesProps {
const { props, refresh, setRefreshRequested } =
useWithResourcesBase(actions);
useFocusEffect(
useCallback(() => {
setRefreshRequested(true);
}, [])
);
const isFocused = useIsFocused();
useEffect(() => {
const handleAppStateChange = (nextAppState: AppStateStatus) => {
if (nextAppState === "active" && isFocused) {
setRefreshRequested(true);
}
};
AppState.addEventListener("change", handleAppStateChange);
return () => {
AppState.removeEventListener("change", handleAppStateChange);
};
}, [isFocused]);
return { ...props, refresh };
}
```
This will fetch the data (if TTL set, only when it is expired) if the screen is focused, or when the screen is focused and the app goes from background to foreground.