Inject Vue Hook Context into Child Components

sampleHook.ts

import { ref } from "vue";
import useContext from "../utils/useContext";

const useSampleHook = (userDefinedName) => {
  const name = ref(userDefinedName);
  return {
    name,
    refreshData,
  };
};

export const useSampleHookContext = useContext(useTestHook);

useContext.ts

import { provide, inject } from "vue";

let uid = 0;

// Creates a hook that injects the definition into the child components
export default function useContext<T extends any>(definition: T) {
  const id = `$_useContext_${++uid}`;
  const hook = (...args) => {
    const instance = inject(id, null);
    if (instance) return instance;
    const hook = (definition as any)(...args);
    provide(id, hook);
    return hook;
  };
  return hook as T;
}