🛠️ use-meet-context

A simple CLI tool to scaffold React context files with TypeScript. Generate custom context hooks and provider components in seconds.

✨ Features

• 🚀 Generate React context hooks in seconds
• 📝 Fully typed context with TypeScript support
• 🧩 Creates single file with context, provider, and hook
• 💻 Interactive CLI interface for naming contexts
• 🔄 Compatible with React 18, React 19, and Next.js
• 📋 Follows React best practices for hooks and context usage
• 🎨 Clean, modern code structure

📦 Installation

# Using npm
npm install -g use-meet-context

# Using yarn
yarn global add use-meet-context

# Using pnpm
pnpm add -g use-meet-context

# Or use without installing
npx use-meet-context

🚀 Usage

Run the CLI tool and follow the prompts:

# If globally installed
use-meet-context

# Or use directly with npx
npx use-meet-context

The package will generate the file at the root of your project:

? What is the name of the context? › product
✅ Context file created: useProductContext.tsx

📄 Generated Output

/* eslint-disable */
"use client";

import { createContext, useContext, JSX } from "react";
// import { ERROR_MESSAGES } from "@/lib/constants/errorMessages";

type TypeProductContext = {};

const ProductContext = createContext<TypeProductContext | undefined>(undefined);

export const ProductProvider = ({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element => {
  return (
    <ProductContext.Provider value={{}}>{children}</ProductContext.Provider>
  );
};

export const useProductContext = (): TypeProductContext => {
  const context = useContext(ProductContext);

  if (!context) {
    // Replace with: ERROR_MESSAGES.INVALID_USE_OF_PRODUCT_CONTEXT
    throw new Error(
      "Invalid use of context. Make sure the Provider is mounted."
    );
  }

  return context;
};

🔄 How to Use the Generated Context

// In your app or layout component
import { ProductProvider } from "./useProductContext";

function App() {
  return (
    <ProductProvider>
      <YourComponent />
    </ProductProvider>
  );
}

// In your components
import { useProductContext } from "./useProductContext";

function YourComponent() {
  const productContext = useProductContext();

  // Use context values and functions
  return <div>Your component content</div>;
}

📋 Why use-meet-context?

• Save Time: Create context setups in seconds instead of writing boilerplate code
• Consistency: Maintain consistent patterns across your React application
• Best Practices: Generated code follows React's recommended context patterns
• Next.js Ready: Works with the App Router thanks to "use client" directive
• TypeScript First: Fully typed context keeps your application type-safe

This project is licensed under the MIT License.

👨‍💻 Developer

Meet Rathod