Ultimate example of solidjs context hook with nice type-safe (TypeScript) wrappers and reduced boilerplate by using `ReturnType`

README.md

SolidJS Context

By using ReturnType we don't have to manually write ContextType

See React gist for more examples https://gist.github.com/JLarky/5a1642abd8741f2683a817f36dd48e78

And original tweet https://twitter.com/JLarky/status/1554157252856033280

darkContextMinimal.tsx

import { createContext, createSignal, useContext, ParentComponent } from "solid-js";

function useProviderValue() {
  const [isDark, setIsDark] = createSignal(false);
  return { isDark, setIsDark };
}

export type ContextType = ReturnType<typeof useProviderValue>;

const DarkContext = createContext<ContextType | undefined>(undefined);

export const DarkProvider: ParentComponent = (props) => {
  const value = useProviderValue();
  return <DarkContext.Provider value={value}>{props.children}</DarkContext.Provider>
};

// bit.ly/SafeContext
export function useDark() {
  const context = useContext(DarkContext);
  if (context === undefined) {
    throw new Error(`useDark must be used within a DarkProvider`);
  }
  return context;
}

export function useIsDark() {
  return useDark().isDark;
}

export function useSetDark() {
  return useDark().setIsDark;
}

thanks

I figured it out without ReturnType: https://stackoverflow.com/questions/78772925/solidjs-state-type-unknown-usecontext-typescript