open-index/open-npm huggingface dataset:
npm package: @kors/link-extractor
Description: Extract and normalize links from HTML elements with MutationObserver support for dynamic content
Author: Stef Kors
Latest version: 1.0.5

<p align="center">
<h1 align="center">link-extractor</h1>
</p>

#### Supported Platforms
<img src="https://stefkors.com/api/platform/index.svg?os=web" />

Extract and normalize links from HTML elements. Scans anchor tags, deduplicates URLs, and watches for DOM changes with MutationObserver.

## Install

```bash
bun add @kors/link-extractor
```

## Usage

### Extract links from a container

```typescript
import { extractLinks } from "@kors/link-extractor"

const links = extractLinks(document.body, {
  stripWWW: true,
  removeQueryParameters: true,
})

for (const { url, elements } of links) {
  console.log(url, `(${elements.length} anchors)`)
}
```

### Watch for new links in dynamic content

```typescript
import { observeLinks } from "@kors/link-extractor"

const cleanup = observeLinks(document.body, (links) => {
  console.log("Links changed:", links.length)
}, { stripWWW: true })

// Later, stop observing
cleanup()
```

## API

### `extractLinks(root, options?): LinkEntry[]`

Scans all `<a href="...">` elements inside `root`, normalizes and deduplicates URLs, and returns an array of entries.

#### Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `stripWWW` | `boolean` | `false` | Remove `www.` prefix from hostnames |
| `removeQueryParameters` | `boolean` | `false` | Strip query string from URLs |
| `defaultProtocol` | `string` | `"https"` | Protocol to prepend to bare domains |
| `excludeMailto` | `boolean` | `true` | Filter out `mailto:` links |
| `excludeJavascript` | `boolean` | `true` | Filter out `javascript:` links |

#### Returns

```typescript
interface LinkEntry {
  url: string
  elements: HTMLAnchorElement[]
}
```

### `observeLinks(root, callback, options?): () => void`

Calls `callback` immediately with current links, then again whenever the DOM changes (child nodes added/removed, `href` attributes modified). Returns a cleanup function to disconnect the observer.

## License

MIT
npm package: @kors/relative-time
Description: Relative time formatting utility and auto-updating React component
Author: Stef Kors
Latest version: 1.0.5

<p align="center">
<h1 align="center">relative-time</h1>
</p>

#### Supported Platforms
<img src="https://stefkors.com/api/platform/index.svg?os=web" />

Relative time formatting utility and auto-updating React component. Converts ISO date strings into human-readable relative timestamps like "5m ago", "yesterday", or "3 hours ago".

## Install

```bash
bun add @kors/relative-time
```

## Usage

### Utility function

```typescript
import { formatRelativeTime } from "@kors/relative-time"

formatRelativeTime("2025-06-15T12:00:00Z")          // "5m ago"
formatRelativeTime("2025-06-15T12:00:00Z", "long")   // "5 minutes ago"
```

### React component

```tsx
import { RelativeTime } from "@kors/relative-time"

function CommitRow({ date }: { date: string }) {
  return <RelativeTime date={date} style="short" className="text-muted" />
}
```

The component auto-updates on a smart interval: every 10s when under a minute old, every minute when under an hour, and every hour after that.

## API

### `formatRelativeTime(isoDate, style?)`

| Param | Type | Default | Description |
|-------|------|---------|-------------|
| `isoDate` | `string` | — | ISO 8601 date string |
| `style` | `"short" \| "long"` | `"short"` | Output format |

Returns a human-readable relative time string.

### `<RelativeTime />`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `date` | `string` | — | ISO 8601 date string |
| `style` | `"short" \| "long"` | `"short"` | Output format |
| `className` | `string` | — | CSS class for the wrapping `<span>` |

## License

MIT
npm package: @kors/use-click-outside
Description: React hook to detect clicks outside a referenced element
Author: Stef Kors
Latest version: 1.0.5

<p align="center">
<h1 align="center">use-click-outside</h1>
</p>

#### Supported Platforms
<img src="https://stefkors.com/api/platform/index.svg?os=web" />

React hook to detect and respond to clicks outside a referenced element. Useful for closing dropdowns, modals, popovers, and other dismissible UI.

## Install

```bash
bun add @kors/use-click-outside
```

## Usage

```tsx
import { useRef } from "react"
import { useClickOutside } from "@kors/use-click-outside"

function Dropdown() {
  const ref = useRef<HTMLDivElement>(null)
  const [open, setOpen] = useState(true)

  useClickOutside(ref, () => setOpen(false), open)

  if (!open) return null

  return (
    <div ref={ref}>
      <p>Click outside to close</p>
    </div>
  )
}
```

## API

### `useClickOutside(ref, handler, enabled?)`

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `ref` | `RefObject<T \| null>` | — | Ref to the element to watch |
| `handler` | `(event: ClickOutsideEvent) => void` | — | Called when a click outside is detected |
| `enabled` | `boolean` | `true` | Toggle the listener on or off |

### Types

| Type | Definition |
|------|------------|
| `ClickOutsideEvent` | `MouseEvent \| TouchEvent` |

## License

MIT
npm package: @kors/use-resizable
Description: React hook for resizable panels with localStorage persistence and CSS variable binding
Author: Stef Kors
Latest version: 1.0.5

<p align="center">
<h1 align="center">use-resizable</h1>
</p>

#### Supported Platforms
<img src="https://stefkors.com/api/platform/index.svg?os=web" />

React hook for building resizable panels. Persists width to localStorage, syncs a CSS variable, and handles pointer capture for smooth dragging.

## Install

```bash
bun add @kors/use-resizable
```

## Usage

```tsx
import { useResizable } from "@kors/use-resizable"

function Sidebar() {
  const { width, isResizing, handleMouseDown } = useResizable({
    storageKey: "sidebar-width",
    defaultWidth: 280,
    minWidth: 200,
    maxWidth: 500,
    cssVariableName: "--sidebar-width",
  })

  return (
    <div style={{ width }}>
      <div
        onMouseDown={handleMouseDown}
        style={{ cursor: "col-resize", width: 4 }}
      />
    </div>
  )
}
```

## API

### `useResizable(options): UseResizableReturn`

#### Options

| Option | Type | Description |
|--------|------|-------------|
| `storageKey` | `string` | localStorage key for persisting width |
| `defaultWidth` | `number` | Initial width when no saved value exists |
| `minWidth` | `number` | Minimum allowed width |
| `maxWidth` | `number` | Maximum allowed width |
| `cssVariableName` | `string` | CSS custom property to sync (e.g. `--sidebar-width`) |
| `getOffset` | `() => number` | Optional offset for clientX calculation |

#### Returns

| Property | Type | Description |
|----------|------|-------------|
| `width` | `number` | Current panel width |
| `isResizing` | `boolean` | Whether a resize drag is active |
| `handleMouseDown` | `(e: ReactMouseEvent) => void` | Attach to your drag handle element |

## License

MIT
npm package: @korsolutions/react-native-joystick
Description: React Native Joystick
Author: Ion Korol
Latest version: 2.0.1

# React Native Joystick

[![NPM](https://nodei.co/npm/@korsolutions/react-native-joystick.png)](https://nodei.co/npm/@korsolutions/react-native-joystick)

[![runs with Expo Go](https://img.shields.io/badge/Runs%20with%20Expo%20Go-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/client)

## TOC

- [Installation](#installation)
- [Preview](#preview)
- [Usage](#usage)
- [Props](#props)
- [Types](#types)

## Installation

**NPM**

```shell
npm install react-native-joystick react-native-gesture-handler --save
```

**YARN**

```shell
yarn add react-native-joystick react-native-gesture-handler
```

Add GestureHandlerRootView at the root level of your app.
```js
import { GestureHandlerRootView } from "react-native-gesture-handler";

<GestureHandlerRootView>
  <YourApp />
</GestureHandlerRootView>
```

## Preview

![React Native Axis Pad: Screen Preview](./assets/preview.gif)

## Usage

```js
import { KorolJoystick } from "korol-joystick";
```

```js
<KorolJoystick color="#06b6d4" radius={75} onMove={(data) => console.log(data)} />
```

## Props

### radius

Set the size radius of the container circle
The inside joystick radius is 1/3 of this size
Type: **Number**

### color

Set the color scheme of the joystick
The color of the container and the joystick is set based on this color with a set opacity.

type: **HEX Color Code**

### onMove, onStart, onStop

A callback function with an argument of type [MoveJoystickEvent](#MoveJoystickEvent).

type: **Function**

## Types

### MoveJoystickEvent

Event returned by the onMove, onStart and onStop callbacks.

```js
{
  type: "move" | "stop" | "start";
  position: {
    x: number;
    y: number;
  }
  force: number;
  angle: {
    radian: number;
    degree: number;
  }
}
```
npm package: @korsolutions/relay
Description: ```bash # Using npm npm install @korsolutions/relay
Latest version: 0.15.0

### Installation

```bash
# Using npm
npm install @korsolutions/relay

# Using pnpm
pnpm add @korsolutions/relay

# Using yarn
yarn add @korsolutions/relay
```

## Documentation

Visit [korsoftwaresolutions.github.io/relay](https://korsoftwaresolutions.github.io/relay) for full documentation:

- [Installation Guide](https://korsoftwaresolutions.github.io/relay/docs/installation)
- [Client API Reference](https://korsoftwaresolutions.github.io/relay/docs/client)
- [Server API Reference](https://korsoftwaresolutions.github.io/relay/docs/server)
- [Complete API Documentation](https://korsoftwaresolutions.github.io/relay/docs/api-reference)

## License

Relay is released under the [O'Saasy License](https://github.com/KorSoftwareSolutions/license/blob/main/SAAS-LICENSE.MD).

## Acknowledgments

Relay is built and maintained by [Kor Solutions](https://github.com/KorSoftwareSolutions).