/reactuse

createSharedHook

Turns a hook into a shared singleton-style hook when multiple components should subscribe to the same underlying hook result.

Usage

import { createSharedHook, useMediaQuery } from "@siberiacancode/reactuse";

const useSharedMobile = createSharedHook(useMediaQuery);

Example

import { createSharedHook, useMediaQuery } from "@siberiacancode/reactuse";

const useSharedMobile = createSharedHook(useMediaQuery);

export const Header = () => {
  const isMobile = useSharedMobile("(max-width: 768px)");
  return <header>{isMobile ? "Mobile" : "Desktop"}</header>;
};

useHook:

const useSharedOnline = createSharedHook(useOnline);

hook arguments:

const useSharedMobile = createSharedHook(useMediaQuery);
const isMobile = useSharedMobile("(max-width: 768px)");

Type Declarations

export declare const createSharedHook: <
  Hook extends (...args: any[]) => any
>(
  useHook: Hook
) => (...args: Parameters<Hook>) => ReturnType<Hook>;