open-index/open-npm huggingface dataset:
npm package: @frequencyadvisors/freeq-snippets
Description: A self-contained, feature-based React snippet library with **automatic language detection**.
Latest version: 0.1.4

# 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

```tsx
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

```tsx
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

```json
{
  "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" />`