rt-hook-lib

This library contains a collection of custom React hooks that can be used to solve common problems in React applications.

Installation

To install the library, run the following command

npm install rt-hook-lib

or

yarn add rt-hook-lib

Usage

To use a hook from the library, import it into your component and use it like any other hook. For example, to use the useWindowSize hook, import it and call it in your functional component:

import React from "react";
import { useWindowSize } from "rt-hook-lib";

const MyComponent = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
};

export default MyComponent;

Available Hooks

The following custom hooks are currently available in the library:

useWindowSize

This hook returns the current size of the window. It updates whenever the window size changes. Example:

import { useWindowSize } from "rt-hook-lib";

const MyComponent = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
};

export default MyComponent;

useWindowResizeThrottler

import { useWindowResizeThrottler } from "rt-hook-lib";

const MyComponent = () => {
  const { width, height } = useWindowResizeThrottler(1000);

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
};

export default MyComponent;

Returns the current size of the window, but with a debounce function to limit the number of times the hook is called.

useFetchData

This is a custom React hook that simplifies the process of making API requests with fetch. It includes support for refetching the data at specified interval, as well as canceling the request with an abort controller.

Usage

To use this hook, simply import it and call it in your functional component.

import { useFetchData } from 'rt-hook-lib';

function MyComponent() {
  const { data, isLoading, isError, error, refetchData } = useFetchData({
    url: 'https://example.com',
    options: {
      method: 'GET',
    },
    refetchInterval: {
      timeFormat: 'm',
      duration: 5,
    },
  });

  // You can use the returned values in your component
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <button onClick={refetchData}>Refetch</button>
    </div>
  );
}

Props

The hook accepts the following props:

• url: The URL to fetch data from.
• options (optional): Optional fetch options to include in the request such as method, headers, credentials , etc.
• abortController (optional): Whether or not to include an abort controller for canceling the request. Defaults to false.
• refetchInterval (optional): It is an optional number or an object with following two proferties:
  • timeFormat: The time format for the duration. Must be one of 'ms', 's', 'm', 'h', or 'd'.
  • duration: The duration to wait between refetching the data in the specified time format.

Returns

The hook returns an object with the following properties:

• isLoading: Whether or not the data is currently loading.
• error: The error message if there was an error fetching the data.
• isError: Whether or not there was an error fetching the data.
• data: The fetched data.
• refetchData: A function to manually refetch the data

Contributing

Contributions to rt-hook-lib are welcome! If you have a custom hook that you'd like to add to the library, please submit a pull request.

License

rt-hook-lib is released under the MIT License.