---

useScrollRestoration

useScrollRestoration is a custom React hook designed to restore scroll positions when navigating between pages or components. It helps maintain scroll positions and ensuring a seamless user experience.

Usage

import { useScrollRestoration } from '@resourge/react-fetch';

const MyComponent = () => {
  // 'action' must be 'pop' for restoration to work;
  const [scrollRestore, ref, onScroll] = useScrollRestoration('pop');

  // Use scrollRestore, ref, and onScroll as needed

  return (
    <div ref={ref} onScroll={onScroll}>
      {/* Your JSX */}
    </div>
  );
};

Parameters

useScrollRestoration accepts two parameters:

1. action: A string specifying the action that triggers scroll restoration. Only 'pop' will restore the scroll position.
2. scrollRestorationId: An optional unique ID categorizing the current component. It defaults to window.location.pathname if not provided.

Example

import { useScrollRestoration } from '@resourge/react-fetch';
// or react-router
import { useAction } from '@resourge/react-router';

const MyComponent = () => {
  // 'action' must be 'pop' for restoration to work;
  const action = useAction();
  const [scrollRestoration, ref, onScroll] = useScrollRestoration(action);

  // Fetch data and trigger scroll restoration
  // 'scrollRestoration' is a function to restore scroll position
  const { data, fetch, error } = useFetch(
    () => {
      return HttpService.get("url");
    },
    {
      initialState: [],
      scrollRestoration // Pass scrollRestoration to useFetch for scroll restoration
    }
  );

  return (
	// onScroll is optional because ref will do, but for cases where ref can't listen to onScroll the function does the job
    <div ref={ref} onScroll={onScroll}>
      {/* Your JSX */}
    </div>
  );
};

In this example, useScrollRestoration is used to manage scroll restoration based on the action parameter (which should be 'pop' for restoration to work) and a unique scrollRestorationId. It provides a scrollRestoration function to restore scroll position and can be used in conjunction with other hooks like useFetch for seamless scroll restoration during navigation.

Note: If you choose not to use the ref returned by useScrollRestoration, the system will use the global window onScroll event to handle scroll restoration.

useFetchOnDependencyUpdate

useFetchOnDependencyUpdate is a custom React hook designed to trigger all useFetch requests in mounted components when specified dependencies change. It helps remove the need to manually update dependencies for each useFetch call, providing a centralized way to manage fetch requests based on common dependencies.

Usage

import { useFetchOnDependencyUpdate } from '@resourge/react-fetch';

const MyComponent = ({ someDependency }) => {
  // Call useFetchOnDependencyUpdate with the dependency array
  useFetchOnDependencyUpdate([someDependency]);

  // Other component logic

  return (
    <div>
      {/* Your JSX */}
    </div>
  );
};

Parameters

useFetchOnDependencyUpdate accepts two parameters:

1. deps: An array of dependencies that will trigger all useFetch requests in mounted components when they change.
2. filterRequest: An optional function to filter out requests not needed by the specified dependencies. The id parameter in the function is equal to the id used in the useFetch config.

Example

import { useFetchOnDependencyUpdate } from '@resourge/react-fetch';

const MyComponent = ({ userId }) => {
  // Trigger all useFetch requests when 'userId' changes
  useFetchOnDependencyUpdate([userId]);

  // Other component logic

  return (
    <div>
      {/* Your JSX */}
    </div>
  );
};

useIsOnline

useIsOnline is a custom React hook designed to monitor the online status of the application.

Example

import { useIsOnline } from 'path/to/useIsOnline';

const MyComponent = () => {
  const isOnline = useIsOnline();

  return (
    <div>
      <h1>Application Status</h1>
      <p>{isOnline ? 'Online' : 'Offline'}</p>
    </div>
  );
};

In this example, useIsOnline is used to monitor the online status of the application. The isOnline variable will be true when the application is online and false when offline. This can be useful for showing different UI components or handling network-related behavior accordingly.

---