open-index/open-npm huggingface dataset:
npm package: @hydroperx/color
Description: Color library
Author: Hydroper
Latest version: 1.0.1

# @hydroperx/color

## Documentation

### Color

The `Color` class is similiar to [NPM color](https://www.npmjs.com/package/color), but supports calculating color difference (`color.delta(other)`) and does not need a separate typings package.

### Color observer

Utility for detecting the computed character color (the cascading `color` property) in an element. This is useful for icons that adapt to light and dark themes.

```ts
import { ColorObserver } from "@hydroperx/color";
import { useEffect, useRef } from "react";

const ref = useRef<HTMLDivElement | null>(null);

useEffect(() => {
    // color observer
    const color_observer = new ColorObserver(ref.current, color => {
        console.log("light =", color.isLight());
    });

    // cleanup function
    return () => {
        color_observer.cleanup();
    };
}, []);
```
npm package: @hydroperx/colorobserver
Description: Color observer utility
Author: Hydroper
Latest version: 1.0.4

# @hydroperx/colorobserver

Simple TypeScript utility that detects the computed character color (the CSS `color` property) in an element, checking for mouse and focus events across all parents.

This is useful for icons that adapt to light and dark themes.

## Example

```ts
import { ColorObserver } from "@hydroperx/colorobserver";
import { useEffect, useRef } from "react";

const ref = useRef<HTMLDivElement | null>(null);

useEffect(() => {
    // color observer
    const color_observer = new ColorObserver(ref.current, color => {
        console.log("light =", color.isLight());
    });

    // cleanup function
    return () => {
        color_observer.cleanup();
    };
}, []);
```
npm package: @hydroperx/drag4react
Description: React drag-n-drop
Author: Hydroper
Latest version: 1.1.2

# Drag for React

Drag-n-drop for React.

## Getting started

```tsx
import Draggable from "@hydroperx/drag4react";
import { useRef } from "react";

function Content()
{
    const div_ref = useRef<HTMLDivElement | null>(null);
    return (
        <Draggable nodeRef={div_ref}>
            <div ref={div_ref}>
                Drag me
            </div>
        </Draggable>
    );
}
```

## Resulting property values

The library as part of the `draggable` dependency uses `inset`/`left`/`top` for moving elements.