open-index/open-npm huggingface dataset:
npm package: @react-synth/synth
Description: Live coding music with React
Latest version: 0.2.2-alpha

# React Synth 🎹

This is a fun little experiment showing that React API can be used outside of
browser environment to render... music instead of HTML.

Should you use it? I don't know, you are an adult.

## Documentation

See [documentation page](https://rafalsz98.github.io/react-synth/) for more info

## Quick start

Init new repository and install react-synth and its dependencies:

```bash
npm init
npm i @react-synth/synth react
npm i -D @types/react
```

Then create new `.tsx` file. React-synth requires created file to have default
export with ReactNode. For example, you can paste below code:

```tsx
// song.tsx
import React from "react";
import {
  Chord,
  Loop,
  Note,
  Sample,
  Sequence,
  Synth,
  Track,
} from "@react-synth/synth";

export default function MySong() {
  return (
    <Track bpm={120}>
      {/* Simple kick drum pattern */}
      <Loop id="kick" interval={1}>
        <Sample name="bd_haus" amp={2} />
      </Loop>

      {/* Melody arpeggio with prophet synth */}
      <Loop id="melody" interval={2}>
        <Synth type="prophet">
          <Sequence interval={0.25}>
            <Note note="C4" />
            <Note note="E4" />
            <Note note="G4" />
            <Note note="C5" />
          </Sequence>
        </Synth>
      </Loop>

      {/* Chord progression */}
      <Loop id="pads" interval={4}>
        <Synth type="hollow">
          <Chord notes="Am7" release={4} amp={0.5} />
        </Synth>
      </Loop>
    </Track>
  );
}
```

Then run it with:

```bash
npx react-synth song.tsx
```

Now any change made to the code will cause hot reload without disruption.

## Inspired By

- [Sonic Pi](https://sonic-pi.net/) - The original live coding synth

## License

MIT
npm package: @react-tabtab-next/tabtab
Description: [TypeScript] A mobile support, draggable, editable and api based Tab for ReactJS
Author: Alexandr Kozhevnikov
Latest version: 3.3.0

# @react-tabtab-next/tabtab

Main component of [react-tabtab-next](https://github.com/onmotion/react-tabtab-next)

Documentation: https://github.com/onmotion/react-tabtab-next
npm package: @react-tela/core
Description: Core Canvas2D rendering engine for react-tela
Latest version: 1.0.1

# @react-tela/core

The rendering engine behind [react-tela](https://github.com/TooTallNate/react-tela) — a pure Canvas2D scene graph with **zero React dependency**.

## Overview

`@react-tela/core` provides the entity classes, event system, and rendering pipeline that power react-tela. It can be used standalone for imperative Canvas2D rendering, or as the foundation for framework-specific bindings.

## Entity Classes

| Entity | Description |
|--------|-------------|
| `Rect` | Rectangle |
| `Arc` | Arc / circle |
| `Ellipse` | Ellipse |
| `Path` | SVG path |
| `Line` | Line segment |
| `BezierCurve` | Cubic bézier curve |
| `QuadraticCurve` | Quadratic bézier curve |
| `Text` | Text with overflow, multiline, and alignment |
| `Image` | Async image loading and rendering |
| `Group` | Container for grouping entities |
| `Canvas` | Nested offscreen canvas |
| `Pattern` | Repeating pattern fill |

All entities support common props: `x`, `y`, `width`, `height`, `alpha`, `rotate`, `scaleX`, `scaleY`, `shadowColor`, `shadowBlur`, `filter`, `blendMode`, and pointer events.

## Usage

```ts
import { Root, Rect, Text } from '@react-tela/core';

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const root = new Root(ctx);

const rect = new Rect({ x: 10, y: 10, width: 100, height: 60, fill: 'blue' });
root.add(rect);

const text = new Text({ x: 20, y: 30, text: 'Hello!', fill: 'white', fontSize: 16 });
root.add(text);

// Rendering happens automatically via queueRender()
```

## Installation

```bash
npm install @react-tela/core
```

Most users should install `react-tela` instead, which includes this package and adds React bindings.

## License

MIT
npm package: @react-telegram/core
Description: Core React reconciler for Telegram bots
Latest version: 0.1.0

# @react-telegram/core

Core React reconciler for building Telegram bots with React components.

## Installation

```bash
bun add @react-telegram/core react
```

## Usage

```tsx
import { createContainer } from '@react-telegram/core';

const { render, container } = createContainer();

const App = () => (
  <>
    <b>Hello Telegram!</b>
    <br />
    <i>Built with React</i>
  </>
);

render(<App />);
console.log(container.root);
```

## Supported Elements

### Text Formatting
- `<b>`, `<strong>` - Bold text
- `<i>`, `<em>` - Italic text
- `<u>`, `<ins>` - Underlined text
- `
`, `<strike>`, `<del>` - Strikethrough text
- `<code>` - Inline code
- `<pre>` - Code blocks
- `<br />` - Line breaks

### Telegram-specific
- `<tg-spoiler>` - Spoiler text
- `<tg-emoji>` - Custom emoji
- `<blockquote>` - Quotes (with optional `expandable` prop)
- `<a>` - Links

### Interactive Elements
- `<button>` - Inline keyboard buttons
- `<row>` - Button row container
- `<input>` - Text input handler

## TypeScript Support

This package includes full TypeScript definitions. The JSX elements are automatically typed when you import the package.

## License

MIT
npm package: @react-telegram/mtcute-adapter
Description: MTCute adapter for React Telegram bots
Latest version: 0.1.0

# @react-telegram/mtcute-adapter

MTCute adapter for React Telegram bots. This package provides the integration between React Telegram's core reconciler and the MTCute Telegram client library.

## Installation

```bash
bun add @react-telegram/mtcute-adapter @react-telegram/core react
```

## Usage

```tsx
import React from 'react';
import { MtcuteAdapter } from '@react-telegram/mtcute-adapter';

const Bot = () => (
  <>
    <b>Hello from React Telegram!</b>
    <br />
    <br />
    <row>
      <button onClick={() => console.log('clicked!')}>Click me</button>
    </row>
  </>
);

async function main() {
  const adapter = new MtcuteAdapter({
    apiId: parseInt(process.env.API_ID!),
    apiHash: process.env.API_HASH!,
    botToken: process.env.BOT_TOKEN!
  });

  adapter.onCommand('start', () => <Bot />);
  
  await adapter.start(process.env.BOT_TOKEN!);
  console.log('Bot is running!');
}

main().catch(console.error);
```

## Features

- Full React component support for Telegram messages
- Automatic message updates when state changes
- Button click handling
- Text input support with auto-delete option
- Command handling
- TypeScript support

## API

### MtcuteAdapter

```typescript
const adapter = new MtcuteAdapter({
  apiId: number,
  apiHash: string,
  botToken: string,
  storage?: string // Default: '.mtcute'
});
```

### Methods

- `onCommand(command: string, handler: (ctx) => ReactElement)` - Register a command handler
- `start(botToken: string)` - Start the bot
- `sendReactMessage(chatId: number | string, app: ReactElement)` - Send a React-powered message
- `getClient()` - Get the underlying MTCute client
- `getDispatcher()` - Get the MTCute dispatcher

## License

MIT
npm package: @react-templates/jest-serializer
Description: Serializes React templates to HTML
Latest version: 0.0.1

# @react-templates/jest-serializer

Serializes React elements into an HTML snapshot.

## Usage

```jsonc
// package.json
{
  "jest": {
    "snapshotSerializers": ["@react-templates/jest-serializer"]
  }
}
```

```jsx
import React from 'react';

test('serializes to html', async () => {
  expect(
    <html>
      <head>
        <title>Snapshot</title>
      </head>
      <body>
        <p>Hello, John!</p>
      </body>
    </html>
  ).toMatchSnapshot();
});
```

```js
exports[`serializes to html`] = `
  <html>
    <head>
      <title>Snapshot</title>
    </head>
    <body>
      <p>Hello, John!</p>
    </body>
  </html>
`;
```
npm package: @react-templates/render
Description: Renders a react template to a static markup or text
Latest version: 0.0.5

# @react-templates/render

Renders a template using React & CSS modules

## Installation

```bash
npm install @react-templates/render --save
yarn add @react-templates/render
```

## Usage

```tsx
import React from 'react';
import { IntlProvider, useIntl } from 'react-intl';
import { renderHtml } from '@react-templates/render';
import { WrapperProps } from '@react-templates/render';

// 1) Define props
interface MyTemplateProps {
  user: string;
}

// 2) Define a React template
const MyTemplate: React.FC<MyTemplateProps> = ({ user }) => {
  const intl = useIntl();
  return <p>{intl.formatMessage({ id: 'welcome' }, { user })}</p>;
};

// 3) Define localization
const localization: Record<string, Record<string, string>> = {
  en: {
    welcome: 'Hello, {user}',
  },
};

// 4) Define React providers for localization
const wrapper: React.FC<WrapperProps> = ({ locale, children }) => {
  return (
    <IntlProvider locale={locale} messages={localization[locale]}>
      {children}
    </IntlProvider>
  );
};

// 5) Render HTML
renderHtml<MyTemplateProps>({
  title: 'Hello World!',
  template: MyTemplate,
  data: { user: 'John' },
  dir: 'ltr',
  locale: 'en',
  timeZone: 'Europe/Berlin',
  baseUrl: 'https://bucket.s3.eu-central-1.amazonaws.com',
  wrapper,
});
```

```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World!</title>
  </head>
  <body>
    <p>Hello, John</p>
  </body>
</html>
```