open-index/open-npm huggingface dataset:
npm package: @sebkolind/draggy
Description: A lightweight drag&drop library built with TypeScript.
Author: sebkolind
Latest version: 0.0.1

# Draggy

A framework agnostic and lightweight drag&drop library built with TypeScript.

## Install

```bash
npm i @sebkolind/draggy
```

## Usage

```js
import { draggy } from "@sebkolind/draggy";

draggy({ target: ".column" });
```

## Documentation

Find the full documentation [here](https://sebkolind.github.io/draggy/).
npm package: @sebkolind/use-image-dimensions
Description: A React Hook that loads image dimensions from a url
Author: Sebastian L. K. Sorensen
Latest version: 1.0.2

# use-image-dimensions
A React Hook that loads image dimensions from any URL. Supports `@2, @3, @4, @x` images out of the box.

## Installation

```sh
npm install @sebkolind/use-image-dimensions
```

## Use Case

This hook is useful if you need to know the dimensions of an image before it is loaded. This can be useful for layout calculations or for preloading images.
It will help you avoid layout shifts when the image is loaded.

<!-- help me write a social media post about this hook -->
Some time ago I built a hook that would read the width and height of an image before it was rendered in the DOM.

The reasoning behind this was to avoid layout shifts when my component was rendered. It's been sitting on GitHub without getting any attention at all, so I thought I'd share it with you!

The hook is called `useImageDimensions` and it's available on npm. It's super easy to use and it supports `@2, @3, @4, @x` images out of the box. Check it out here https://github.com/sebkolind/use-image-dimensions.

I hope you find it useful! 🚀

## Usage

```jsx
import {useImageDimensions} from '@sebkolind/use-image-dimensions'

const url = 'image-url@2.jpg'

const Component = () => {
  /**
   * If the image URL contains a zoom multiplier (@2, @3, @4),
   * the dimensions will be calculated by dividing width/height with the multiplier.
   */
  const {width, height} = useImageDimensions(url,
    {
      /**
       * Optional
       *
       * If you are concerned with UI flickering this could be helpful.
       * Potential zoom multiplier will not be taken into consideration here,
       * as this is a manual override of the hooks functionality.
       */
      initialDimensions: {
        width: 300,
        height: 120,
      }
    }
  )
  
  return (
    <img src={url} width={width} height={height} />
  )
}
```
npm package: @sebkolind/use-resize
Description: Listen on any components width and height via a convenient hook. Built for Preact with Typescript.
Author: Sebastian K. Sorensen
Latest version: 1.0.4

# useResize

Listen on any components width and height via a convenient hook. Built for Preact with Typescript.

## Installation

```bash
npm i @sebkolind/use-resize
```

## Basic usage

The hook is written in Typescript, and the examples are all in Typescript - you should consider using Typescript.

```tsx
import {h, Component} from 'preact';
import {useResize} from '@sebkolind/use-resize';

import {MyOtherComponent} from './components/MyOtherComponent';

const MyComponent: FunctionalComponent = () => {
    const ref = useRef<Component>();
    const {width, height, isMobile, isWide} = useResize(ref, {isMobile: 450});

    // Gives you the width & height of <MyOtherComponent />
    console.log(width, height);

    // `boolean` which tells you if the width is _below_ the isMobile threshold.
    console.log(isMobile);

    // `boolean` which tells you if the width is _above_ the isWide threshold.
    console.log(isWide);

    return (
        <div>
            <MyOtherComponent ref={ref} />
            {isMobile && <div>Only show me when width is below isMobile threshold.</div>}
        </div>
    )
}
```

## Options

- `isMobile` set the threshold for a mobile layout. (Default: 760)
- `isWide` set the threshold for a wide layout. (Default: 1000)

### Usage with options

```ts
useResize(ref, {isMobile: 325, isWide: 1450});
```
npm package: @sebnozzi/miniscript-ts
Description: MiniScript implementation in TypeScript
Author: Sebastian Nozzi
Latest version: 0.1.0


# MiniScript.TS

A MiniScript implementation written in TypeScript.

At the moment this project is not published either in a CDN for browser consumption nor as an NPM package to be used in Node.js. You will have to build locally. See section below.

## Features

* Runs both on the browser and Node.js
* Fully passes the "TestSuite.txt" from the official C# implementation
* Performance similar to Mini Micro on the desktop
* Extensible via custom intrinsic functions
* Easy integration with JavaScript, as it uses native JS data-types (except for "map")
* Usable in TypeScript projects (type definitions provided)

## Building

You need to have Node.js installed in order to build the project. Version 19 or greater is recommended.

Start by installing all needed packages:

```
npm install
```

Then build with:

```
npm run build
```

This will create a `dist` folder with the following files:

* `miniscript-ts.mjs`: ECMAScript module for Node.js
* `miniscript-ts.js`: [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE#the_module_pattern) file for the browser
* `miniscript-ts.d.ts`: TypeScript types
* `miniscript-ts.cjs`: CommonJS module, should you need it
* Map-files for each module type

## Usage on the browser

Consult the [examples/browser](examples/browser/) folder.

Note that you will need to build locally for the examples to work.

You will also need a local file-server if you want to open the examples on the browser.

## Usage on Node.js

Consult the [examples/nodejs](examples/browser/) folder.

Note that you will need to build locally for the examples to work.

## Testing

The test suites can be run from the command line with:

```
npm run test
```

Alternatively you can open a browser-based UI with:

```
npm run test-ui
```

## Acknowledgements

Many thanks to the amazing MiniScript community at Discord, for their encouragement during the development of this project.

Special thanks go to Joe Strout, author and creator of the MiniScript language and the Mini Micro programming environment. Without his generous help this project would not have been possible.
npm package: @sebo2205/gd-browser-api-module
Description: A npm module that will (hopefully) make it easier to use GD Colon's GD Browser API
Author: Sebo2205
Latest version: 0.0.1

# gd-browser-api-module
A npm module that will (hopefully) make it easier to use [GD Colon's](https://www.youtube.com/channel/UCFDsxSlQXpLLpVScy2NmbcQ) [GD Browser API](https://gdbrowser.com/api)

# idk
[GD Colon](https://www.youtube.com/channel/UCFDsxSlQXpLLpVScy2NmbcQ) does cool stuff and you should check him out lol