Snippets Module

A self-contained, feature-based React snippet library with automatic language detection.

Structure

public
└── data/                    # Snippet data files
    └── snippets/
        └── category-name/
            ├── snippet-name.json
            └── snippet-name.ts

src/snippets/
└── categories/
    ├── index.ts             # Main exports
    ├── components/          # React components
    │   └── SnippetIcon.tsx  # Icon + popup component + provider
    └── hooks/               # Custom hooks
        └── useSnippets.ts   # Data loading hook

Usage

import { SnippetProvider, SnippetIcon } from "@/snippets";

export default function App() {
  return (
    <SnippetProvider>
      {/* Basic Usage - shows default Code2 icon */}
      <SnippetIcon snippetId="authentication/jwt-login" />

      {/* With custom content */}
      <SnippetIcon snippetId="styling/responsive-grid">
        show me the code
      </SnippetIcon>

      {/* With custom styling */}
      <SnippetIcon snippetId="components/modal-component" className="ml-2">
        View Modal Component
      </SnippetIcon>
    </SnippetProvider>
  );
}

Available Props

interface SnippetIconProps {
  snippetId: string; // Required: "category/filename" format
  className?: string; // Optional: Additional CSS classes
  children?: React.ReactNode; // Optional: Custom content (defaults to Code2 icon)
}

Behavior

• With children: Displays the custom content you provide between the tags
• Without children: Shows the default <Code2 /> icon
• Click interaction: Opens a popup dialog with the full snippet code and details
• Hover: Shows a tooltip with the snippet title

Adding New Snippets

1. Create a JSON file in data/[category]/[name].json

Example JSON Structure

{
  "id": "jwt-login",
  "title": "JWT Token Authentication",
  "subtitle": "JWT authentication with secure token storage",
  "description": "Implement JWT token-based authentication with login functionality. This example shows how to authenticate users, store tokens securely, and handle authentication state across your application.",
  "category": "authentication",
  "documentationUrl": "https://nextjs.org/docs/authentication",
  "codeFile": "./jwt-login.code.ts"
}

2. Create a code file containing the code snippet (e.g. jwt-login.code.ts)
3. Use the snippet with <SnippetIcon snippetId="category/name" />