open-index/open-npm huggingface dataset:
npm package: @react-cli-ui/cli
Description: Command line interface for React.js development
Author: Kalachev Vlad
Latest version: 0.0.8

<img src="https://images.ctfassets.net/x4we65bqi45q/79clZXZmtPwWzTux2YIlgn/a78c0f54e7e6369275eaac7e04933835/1_HSisLuifMO6KbLfPOKtLow.jpeg" title="react" alt="react">

# @react-cli-ui/cli <a href="https://www.npmjs.com/package/@react-cli-ui/cli"><img src="http://img.shields.io/npm/l/@react-cli-ui/cli.svg?sanitize=true" alt="License"></a>  <a href="https://www.npmjs.com/package/@react-cli-ui/cli"><img src="http://img.shields.io/npm/v/@react-cli-ui/cli.svg?sanitize=true" alt="Version"></a> [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

> React CLI is the Tooling for React.js Development.

## Install

``` sh
npm install -g @react-cli-ui/cli
```

![](demo.gif)

## Usage

```bash
react ui
```

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @react-cli-ui/cli-ui
Description: cli ui
Author: Kalachev Vlad
Latest version: 0.0.8

<img src="https://images.ctfassets.net/x4we65bqi45q/79clZXZmtPwWzTux2YIlgn/a78c0f54e7e6369275eaac7e04933835/1_HSisLuifMO6KbLfPOKtLow.jpeg" title="react" alt="react">

# @react-cli-ui/cli-ui <a href="https://www.npmjs.com/package/@react-cli-ui/cli-ui"><img src="http://img.shields.io/npm/l/@react-cli-ui/cli.svg?sanitize=true" alt="License"></a> <a href="https://www.npmjs.com/package/@react-cli-ui/cli-ui"><img src="http://img.shields.io/npm/v/@react-cli-ui/cli-ui.svg?sanitize=true" alt="Version"></a> [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

To work with this package please install @ react-cli-ui/cli

> React CLI is the Tooling for React.js Development.

## Install

```bash
Windows
npm install -g @react-cli-ui/cli

Mac
sudo npm install -g @react-cli-ui/cli
```

![](demo.gif)

## Usage

```bash
Windows
react ui

Mac
sudo react ui
```

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @react-clickmap/cli
Description: Local CLI dev server and preview dashboard for react-clickmap.
Latest version: 0.1.0

# @react-clickmap/cli

Local self-hosted preview API and dashboard for `react-clickmap`.

## Install

```bash
pnpm add -D @react-clickmap/cli
```

Or run without installing:

```bash
npx @react-clickmap/cli
```

## Start local preview

```bash
react-clickmap --port 3334
```

This starts:

- Dashboard: `http://127.0.0.1:3334`
- Ingest API: `http://127.0.0.1:3334/api/clickmap`
- Local data file: `.react-clickmap/events.json`

## CLI options

```bash
react-clickmap --host 0.0.0.0 --port 3334 --data ./tmp/clickmap-events.json
```

- `--host`: bind host (default `127.0.0.1`)
- `--port`: bind port (default `3334`)
- `--data`: path to JSON event store

## React adapter wiring

```ts
import { createNextFetchAdapter } from "@react-clickmap/next";

const adapter = createNextFetchAdapter({
  endpoint: "http://127.0.0.1:3334/api/clickmap",
});
```

Now your app sends events to the local preview dashboard.
npm package: @react-clickmap/dashboard
Description: Batteries-included dashboard components for react-clickmap.
Latest version: 0.1.0

# @react-clickmap/dashboard

Batteries-included dashboard UI for `react-clickmap`.

## Install

```bash
pnpm add react-clickmap @react-clickmap/dashboard
```

## Usage

```tsx
"use client";

import { ClickmapDashboard } from "@react-clickmap/dashboard";
import { memoryAdapter } from "react-clickmap";

const adapter = memoryAdapter();

export default function AnalyticsPage() {
  return (
    <main style={{ padding: 20 }}>
      <ClickmapDashboard
        adapter={adapter}
        title="Behavior Overview"
        subtitle="Self-hosted event intelligence"
        showOverlayControls
      />
    </main>
  );
}
```

## Built-in panels

- KPI metrics (events, sessions, rage/dead rates, scroll depth)
- Event mix distribution bars
- Device distribution
- Top pages
- Element hotspot summaries
- Hourly activity timeline

## Overlay controls

Enable and toggle overlays from the dashboard:

- Heatmap overlay
- Attention overlay
- Comparison overlay (when `compareRange` is provided)
- Scroll-depth rail
npm package: @react-clickmap/next
Description: Next.js integration helpers for react-clickmap.
Latest version: 0.1.0

# @react-clickmap/next

Next.js integration helpers for `react-clickmap`.

## Install

```bash
pnpm add react-clickmap @react-clickmap/next
```

## What this package provides

- `createNextFetchAdapter`: Next-friendly fetch adapter defaults (`/api/clickmap`)
- `createClickmapRouteHandlers`: Route handler factory for `GET`, `POST`, `DELETE`, `OPTIONS`
- `useNextRouteKey`: App Router route key helper (`pathname + search`)

## Example route handler

```ts
import { createClickmapRouteHandlers } from "@react-clickmap/next";
import { memoryAdapter } from "react-clickmap";

const adapter = memoryAdapter();

export const { GET, POST, DELETE } = createClickmapRouteHandlers(adapter);
```

## Example client usage

```tsx
"use client";

import { useNextRouteKey } from "@react-clickmap/next";
import { Heatmap } from "react-clickmap";
import type { ClickmapAdapter } from "react-clickmap";

export function Overlay({ adapter }: { adapter: ClickmapAdapter }) {
  const routeKey = useNextRouteKey();
  return <Heatmap adapter={adapter} routeKey={routeKey} />;
}
```
npm package: @react-clickmap/postgres
Description: Postgres persistence adapter and SQL schema for react-clickmap.
Latest version: 0.1.0

# @react-clickmap/postgres

Postgres persistence add-on for `react-clickmap`.

This package provides:

- Canonical SQL schema for clickmap event storage
- A zero-dependency Postgres adapter implementation
- Typed contracts for wiring your own SQL client (`pg`, Postgres.js, Neon, Supabase server client)

## Install

```bash
pnpm add @react-clickmap/postgres react-clickmap
```

## Apply schema

Run the SQL in [`sql/0001_init.sql`](./sql/0001_init.sql) against your database.

## Adapter usage

```ts
import { createPostgresAdapter } from "@react-clickmap/postgres";

const adapter = createPostgresAdapter({
  sql: {
    query: (text, params) => db.query(text, params),
  },
});
```

The adapter implements `save`, `load`, `deleteEvents`, and `loadAggregated`.
npm package: @react-clickmap/supabase
Description: Supabase persistence adapter for react-clickmap.
Latest version: 0.1.0

# @react-clickmap/supabase

Supabase adapter add-on for `react-clickmap`.

This package uses Supabase PostgREST endpoints (no SDK dependency required) and implements the
`ClickmapAdapter` contract:

- `save`
- `load`
- `deleteEvents`
- `loadAggregated`

## Install

```bash
pnpm add react-clickmap @react-clickmap/supabase
```

## Usage

```ts
import { createSupabaseAdapter } from "@react-clickmap/supabase";

const adapter = createSupabaseAdapter({
  url: process.env.NEXT_PUBLIC_SUPABASE_URL!,
  anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  table: "clickmap_events",
});
```
npm package: @react-cmpt/rc-skeleton
Description: Provide a placeholder while you wait for content to load
Author: wangcch
Latest version: 0.1.2

# rc-skeleton

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.

[![Build Status](https://travis-ci.org/react-cmpt/rc-skeleton.svg?branch=master)](https://travis-ci.org/react-cmpt/rc-skeleton)
[![](https://img.shields.io/npm/v/@react-cmpt/rc-skeleton.svg)](https://www.npmjs.com/package/@react-cmpt/rc-skeleton)
[![](https://img.shields.io/github/license/react-cmpt/rc-skeleton.svg)](https://raw.githubusercontent.com/react-cmpt/rc-skeleton/master/LICENSE)

## usage

```shell
yarn add @react-cmpt/rc-skeleton
```

```jsx
import Skelenton from "@react-cmpt/rc-skeleton";

const Demo = () => {
  return (
    <Skelenton loading={loading} emptyData={data == null}>
      <div>content</div>
    </Skelenton>
  );
};
```
npm package: @react-code-finder/core
Description: Inspect React components and copy source locations to clipboard
Author: Jonghakseo
Latest version: 0.1.0

# @react-code-finder/core

Internal core package for react-code-finder. This package is not intended for direct use.

## For Users

Please use one of the following packages instead:

- **Vite**: [@react-code-finder/vite](https://www.npmjs.com/package/@react-code-finder/vite)
- **Next.js**: [@react-code-finder/nextjs](https://www.npmjs.com/package/@react-code-finder/nextjs)

## For Contributors

This package contains the core functionality:

- `src/core/fiber.ts` - React DevTools hook interception, fiber tree traversal
- `src/core/source.ts` - Source location extraction, component stack building
- `src/client/inspector.ts` - Main Inspector class, event handling
- `src/client/overlay.ts` - Hover overlay UI
- `src/transform.ts` - JSX runtime patching for React 19

## License

MIT
npm package: @react-code-finder/vite
Description: Vite plugin for react-code-finder - Inspect React components and copy source locations
Author: Jonghakseo
Latest version: 0.1.0

# @react-code-finder/vite

Vite plugin for react-code-finder. Inspect React components in your browser and copy their source locations to clipboard with a single click.

Perfect for passing UI context to AI coding assistants like Claude Code, Cursor, or GitHub Copilot.

## Features

- Hover over any component to see its name and source location
- Click to copy source location to clipboard (e.g., `src/components/Button.tsx:42:10`)
- Supports React 18 & 19
- Zero runtime overhead in production

## Installation

```bash
npm install @react-code-finder/vite --save-dev
```

## Usage

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { reactCodeFinder } from '@react-code-finder/vite'

export default defineConfig({
  plugins: [react(), reactCodeFinder()],
})
```

## Options

```typescript
reactCodeFinder({
  // Enable/disable the inspector (default: process.env.NODE_ENV === 'development')
  enabled: true,

  // Toggle button position (default: 'bottom-right')
  buttonPosition: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

  // Maximum component stack depth to copy (default: 5)
  maxDepth: 5,

  // Skip anonymous/unknown components in stack trace (default: true)
  skipAnonymous: true,

  // Enable debug logging to console (default: false)
  debug: false,

  // Show overlay for components without source info (default: false)
  showNoSource: false,
})
```

## How It Works

1. A toggle button appears at the configured position when the dev server starts.
2. Click the button to activate Inspector mode.
3. Hover over components to see their names and source locations in an overlay.
4. Click to copy the source location to your clipboard.

## Programmatic API

Control the inspector from browser console or your code:

```typescript
// Enable inspector
window.__REACT_CODE_FINDER__.enable()

// Disable inspector
window.__REACT_CODE_FINDER__.disable()

// Toggle inspector
window.__REACT_CODE_FINDER__.toggle()

// Check if inspector is enabled
window.__REACT_CODE_FINDER__.isEnabled
```

## Troubleshooting

Enable `debug: true` to see detailed logs in the browser console:

```typescript
reactCodeFinder({
  debug: true,
})
```

This will log:
- Fiber tree traversal details
- Component source extraction
- DevTools hook initialization status

## Requirements

- Vite >= 4.0.0
- React 18 or 19

## License

MIT
npm package: @react-code-view/core
Description: Core markdown transformation utilities for react-code-view
Latest version: 3.1.0

# @react-code-view/core

Core markdown transformation utilities for react-code-view. This package is framework-agnostic and can be used in any JavaScript environment.

## Installation

```bash
npm install @react-code-view/core
```

## Usage

### Basic Transformation

```js
import { transformMarkdown } from '@react-code-view/core';

const markdown = `
# Hello World

\`\`\`javascript
const greeting = 'Hello!';
console.log(greeting);
\`\`\`
`;

const result = await transformMarkdown(markdown);
console.log(result.code); // ES module string
```

### Custom Languages

```js
import { transformMarkdown } from '@react-code-view/core';

const result = await transformMarkdown(markdown, {
  languages: ['typescript', 'rust', 'python']
});
```

### Direct Highlighting

```js
import { highlight, initHighlighter } from '@react-code-view/core';

// Initialize highlighter (optional, will auto-initialize on first use)
await initHighlighter();

const highlighted = await highlight('print("Hello")', { language: 'python' });
```

## API

### `transformMarkdown(source, options?)`

Transform markdown to an ES module string.

**Options:**
- `languages` - Languages to register for highlighting
- `markedOptions` - Options passed to marked
- `codeBlockClassName` - Custom class for code blocks

### `highlight(code, options?)`

Highlight code with syntax highlighting using Shiki.

**Options:**
- `language` - Programming language (e.g., 'javascript', 'python')
- `theme` - Shiki theme (default: 'github-light')

### `initHighlighter()`

Initialize the Shiki highlighter. Called automatically on first use.

## License

MIT