typesafe-context-hook

A react-typescript utility for creating typesafe React context hooks.

Installation

pnpm i typesafe-context-hook

npm i typesafe-context-hook

yarn i typesafe-context-hook

Usage

import typesafeContextHook from 'typesafe-context-hook';
import { useState } from 'react';

export const { useName, NameProvider, withName } = typesafeContextHook('Name', () => {
  const [name, setName] = useState('John Doe');
  return { name, setName };
});

// In another file
import { useName, NameProvider } from './name-context.tsx';

function App() {
  return (
    <NameProvider>
      <AnotherComponent />
    </NameProvider>
  );
}

function AnotherComponent() {
  const { name, setName } = useName();
  // Now you can use name and setName in this component
}