open-index/open-npm huggingface dataset:
npm package: @och-dev/react-zoom-pan-pinch
Description: Zoom and pan html elements in easy way
Author: prc5
Latest version: 2.1.3

# react-zoom-pan-pinch

[![NPM](https://img.shields.io/npm/v/react-zoom-pan-pinch.svg)](https://www.npmjs.com/package/react-zoom-pan-pinch)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-zoom-pan-pinch)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
![NPM](https://img.shields.io/npm/l/react-zoom-pan-pinch)
![npm](https://img.shields.io/npm/dm/react-zoom-pan-pinch)
![GitHub stars](https://img.shields.io/github/stars/prc5/react-zoom-pan-pinch?style=social)

> Super fast and light react npm package for zooming, panning and pinching html
> elements in easy way

- [Demo](https://prc5.github.io/react-zoom-pan-pinch/?path=/story/examples-big-image--big-image)
- [Docs](https://prc5.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page)

## Features

- :rocket: Fast and easy to use
- :factory: Light, without external dependencies
- :gem: Mobile gestures, touchpad gestures and desktop mouse events support
- :gift: Powerful context usage, which gives you a lot of freedom
- :wrench: Highly customizable
- :crown: Animations and Utils to create own tools

## Install

```bash
npm install --save react-zoom-pan-pinch
```

or

```bash
yarn add react-zoom-pan-pinch
```

## Usage

```jsx
import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper>
        <TransformComponent>
          <img src="image.jpg" alt="test" />
        </TransformComponent>
      </TransformWrapper>
    );
  }
}
```

or

```jsx
import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        initialScale={1}
        initialPositionX={200}
        initialPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={() => zoomIn()}>+</button>
              <button onClick={() => zoomOut()}>-</button>
              <button onClick={() => resetTransform()}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}
```

## License

MIT © [prc5](https://github.com/prc5)
npm package: @ochairo/numbers
Description: Primitive-like integer and decimal types for safe arithmetic
Author: ochairo
Latest version: 0.0.3

<!-- markdownlint-disable MD033 MD041 -->

<div align="center">

# numbers

Primitive-like integer and decimal types for safe arithmetic.<br>

[![npm version](https://img.shields.io/npm/v/@ochairo/numbers)](https://www.npmjs.com/package/@ochairo/numbers)
[![npm downloads](https://img.shields.io/npm/dm/@ochairo/numbers)](https://www.npmjs.com/package/@ochairo/numbers)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@ochairo/numbers)](https://bundlephobia.com/package/@ochairo/numbers)
![CI](https://github.com/ochairo/numbers/workflows/CI/badge.svg)
![License](https://img.shields.io/badge/license-MIT-blue)

</div>

## Features

- **Arbitrary Precision**: No `MAX_SAFE_INTEGER` limit
- **Precise Decimals**: No floating-point errors
- **Fluent API**: Chainable operations
- **Simple**: Just `Int()` and `Decimal()`

## Install

```bash
pnpm add @ochairo/numbers
```

## Quick Start

```ts
import { Int, Decimal } from '@ochairo/numbers';

const integer: Int = Int("9007199254740992");
const decimal: Decimal = Decimal("12345678901234567890.123456790");

integer.add(decimal).toString();       // "12345679901912442382.123456782"
decimal.subtract(integer).toString();  // "12345678901234567889.223456798"
```

## Documentation

- [API Reference](./docs/API.md)
- [Usage Guide](./docs/USAGE.md)
- [Examples](./docs/EXAMPLES.md)

<br><br>

<div align="center">

[Report Bug](https://github.com/ochairo/numbers/issues) • [Request Feature](https://github.com/ochairo/numbers/issues)

**Made with ❤︎ by [ochairo](https://github.com/ochairo)**

</div>
npm package: @ochairo/pulse
Description: Path-aware reactive runtime with explicit get/set/on semantics
Author: ochairo
Latest version: 1.0.7

<!-- markdownlint-disable MD033 MD041 -->

<div align="center">

# <img src="./assets/pulse-logo.svg" alt="pulse logo" width="32" height="16"> pulse

Reacts where you watch.<br>
_Deep, exact-path reactivity for plain objects and arrays._

</div>

## Concept

`pulse` is an exact-path reactive runtime for plain objects and arrays.
It keeps reads, writes, and subscriptions scoped to the concrete node you access, while preserving normal property and index navigation for reachable child nodes.

## Install

```sh
pnpm add @ochairo/pulse
```

## Quick Start

```ts
import { pulse } from "@ochairo/pulse";
import type { User } from "./types";

const users = pulse<User[]>([
  { name: "Mary", age: 30 },
  { name: "Chloe", age: 25 },
]);

// Write through navigation.
users[0]?.name.set("Lois");

// Reads stay scoped to the exact path.
console.log(users[0]?.name.get());

// Exact listeners stay scoped to the exact path too.
users[0]?.prop("name").on((event) => {
  console.log(event.currentValue);
});

// Object branches also stay exact.
const state = pulse({ users: { basic: { name: "John" } } });

state.users.basic.prop("name").on((event) => {
  console.log(event.currentValue);
});

users[0]?.name.on((event) => {
  console.log(event.currentValue);
});

// Ancestor listeners do not fire for descendant-only changes.
state.users.on(() => {
  console.log("only fires when users itself changes");
});
```

`pulse` stays explicit by design:

- `get()` reads exactly the node you access
- `set()` writes exactly the node you access
- `on()` subscribes only to that exact node
- ancestor replacement can still notify a descendant if the descendant value actually changed

## Documentation

- [API](./docs/API.md)

<br>

<div align="center">

[Report Bug](https://github.com/ochairo/pulse/issues) • [Request Feature](https://github.com/ochairo/pulse/issues)

</div>
npm package: @ochairo/scales
Description: Framework-agnostic scale functions for data visualization
Author: ochairo
Latest version: 0.0.2

<!-- markdownlint-disable MD033 MD041 -->

<div align="center">

# scales

Scale functions for data visualization.<br>
_Map data to pixels with zero dependencies._

[![npm version](https://img.shields.io/npm/v/@ochairo/scales)](https://www.npmjs.com/package/@ochairo/scales)
[![npm downloads](https://img.shields.io/npm/dm/@ochairo/scales)](https://www.npmjs.com/package/@ochairo/scales)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@ochairo/scales)](https://bundlephobia.com/package/@ochairo/scales)
![CI](https://github.com/ochairo/scales/workflows/CI/badge.svg)
![License](https://img.shields.io/badge/license-MIT-blue)

</div>

## Features

- 📦 **Tiny**: ~1.7KB minified
- ⚡ **Fast**: Direct computation, zero overhead
- 🌲 **Tree-shakeable**: Use only what you need
- 🔧 **Universal**: Works with any framework

## Install

```bash
pnpm add @ochairo/scales
```

## Quick Start

```ts
import { scaleLinear, scaleBand, scaleTime } from '@ochairo/scales';

// Linear: continuous → continuous
scaleLinear([0, 100], [0, 500])(50);  // 250

// Band: discrete → continuous
scaleBand(['A', 'B', 'C'], [0, 300])('B');  // 100

// Time: dates → continuous
scaleTime([new Date('2024-01-01'), new Date('2024-12-31')], [0, 500]);
```

## Documentation

- [API Reference](./docs/API.md)
- [Usage Guide](./docs/USAGE.md)
- [Examples](./docs/EXAMPLES.md)

<br><br>

<div align="center">

[Report Bug](https://github.com/ochairo/scales/issues) • [Request Feature](https://github.com/ochairo/scales/issues)

**Made with ❤︎ by [ochairo](https://github.com/ochairo)**

</div>