React Custom Hooks Library

This library provides a collection of useful React hooks to enhance your development experience. The hooks cover various functionalities, including API fetching, state management, lifecycle logging, and more.

Installation

You can install the package using npm:

npm install @vishwaraviraaj/react-hooks

Or using yarn:

yarn add @vishwaraviraaj/react-hooks

Hooks Documentation

1. useVirtualList

Efficiently renders large lists by virtualizing the elements.

const { visibleItems, containerRef } = useVirtualList(items, itemHeight, containerHeight);

2. useFetchParallel

Fetch multiple APIs in parallel and manage loading/error states.

const { data, loading, error } = useFetchParallel([url1, url2, ...]);

3. useFetch

General-purpose hook for fetching data from an API.

const { data, loading, error } = useFetch(url);

4. useLocalStorage

Persists state in local storage.

const [value, setValue] = useLocalStorage("key", "defaultValue");

5. usePrevious

Gets the previous value of a state or prop.

const prevValue = usePrevious(value);

6. useComponentLifecycleLogger

Logs component mount and unmount events.

useComponentLifecycleLogger("ComponentName");

7. useNetworkStatus

Detects online/offline network status.

const isOnline = useNetworkStatus();

8. useUndoRedo

Adds undo/redo functionality for state management.

const { state, set, undo, redo, canUndo, canRedo } = useUndoRedo(initialState);

9. useQueue

Manages a queue data structure.

const { queue, enqueue, dequeue } = useQueue();

10. useCSSVariables

Dynamically updates CSS variables.

useCSSVariables({"--main-color": "red", ...});

11. useGetRequest

Fetches data using a GET request.

const { data, loading, error } = useGetRequest(url);

12. usePostRequest

Performs a POST request.

const { data, postRequest, loading, error } = usePostRequest(url);
postRequest(payload);

13. usePutRequest

Performs a PUT request.

const { data, putRequest, loading, error } = usePutRequest(url);
putRequest(payload);

14. useDeleteRequest

Performs a DELETE request.

const { data, deleteRequest, loading, error } = useDeleteRequest(url);
deleteRequest();

15. useTrigger

Triggers a callback when a condition is met.

useTrigger(() => console.log("Triggered!"), condition);

16. useSharedState

Shares state across different components.

const [value, setValue] = useSharedState("sharedKey", "Initial Value");

Contributing

Feel free to contribute to this library by submitting a pull request.

License

MIT License.