open-index/open-npm huggingface dataset:
npm package: @j-f/hyper-statusline
Description: Status Line Plugin for Hyper. Updated fork of @henrikdahl's version.
Latest version: 1.9.1

# hyper-statusline [![hyper](https://img.shields.io/badge/Hyper-v1.3.3-brightgreen.svg)](https://github.com/zeit/hyper/releases/tag/1.3.3) [![npm](https://img.shields.io/npm/v/@j-f/hyper-statusline.svg?maxAge=86400?style=flat-square)](https://www.npmjs.com/package/@j-f/hyper-statusline) [![npm](https://img.shields.io/npm/dt/@j-f/hyper-statusline.svg?maxAge=86400?style=flat-square)](https://www.npmjs.com/package/@j-f/hyper-statusline)

> This is a fork of **@henrikdahl**’s [`hyper-statusline`](https://github.com/henrikdahl/hyper-statusline) package.

Due to a bug in Hyper ([#3288](https://github.com/zeit/hyper/issues/3288)), you can’t install this via `hyper i`.
Until the bug is fixed, you can clone this repo to `~/.hyper_plugins/local/hyper-statusline` and put `hyper-statusline` in your 
`localPlugins`.

---

> Status Line Plugin for [Hyper](https://hyper.is). Shows clickable & useful information. Matches any theme.

![hyper-statusline](https://cloud.githubusercontent.com/assets/1430576/21891665/14d29070-d8d4-11e6-9e98-b12ed28be93a.png)

## Install

Add following to your `~/.hyper.js` config.

```javascript
module.exports = {
  ...
  plugins: ['hyper-statusline']
  ...
}
```

## Config

Add following to `~/.hyper.js`

### Change Git Dirty Color

Expected value is `CSS color`

```javascript
module.exports = {
  config: {
    ...
      hyperStatusLine: {
        dirtyColor: 'salmon',
      }
    ...
  }
}
```

### Change Git Ahead Color

Expected value is `CSS color`

```javascript
module.exports = {
  config: {
    ...
      hyperStatusLine: {
        aheadColor: 'ivory',
      }
    ...
  }
}
```

### Disable Footer Transparency

Default value is set to `true`

```javascript
module.exports = {
  config: {
    ...
      hyperStatusLine: {
        footerTransparent: false,
      }
    ...
  }
}
```

### Open in editor

This is disabled by default so clicking the current directory link will open your file manager.
Set `editor` to your preferred editor to open an editor instead.

Currently supported editors are [VS Code](https://code.visualstudio.com) (`'vscode'`) and [Atom](https://atom.io) (`'atom'`)

```js
module.exports = {
  config: {
    hyperStatusLine: {
      editor: 'vscode',
    },
  },
}
```

## Theme

-   [hyper-chesterish](https://github.com/henrikdahl/hyper-chesterish)

## License

MIT © Henrik
npm package: @j-ho/image-colors
Description: A library to extract dominant colors from images.
Author: j-ho
Latest version: 0.0.3

# Image-Colors

Image-Colors is a powerful and flexible library for extracting dominant colors from images. It uses k-means clustering to identify and analyze the main colors in an image.

## Key Features

- Extract dominant colors from images
- Option to filter similar colors
- Support for both browser and Node.js environments
- Written in TypeScript for type safety
- Support for various image formats (PNG, JPG, etc.)

## Installation

You can install Image-Colors using npm:

```bash
npm install @j-ho/image-colors
```

## Usage

### Browser Environment

```typescript
import { createColorExtractor } from '@j-ho/image-colors/browser';

(async () => {
  const colorExtractor = await createColorExtractor();
  
  const img = document.getElementById('myImage');
  const { colors, dominantColor } = await colorExtractor.extractColors({
    imageSource: img,
    k: 5,
    sampleRate: 0.1,
    onFilterSimilarColors: true,
    useHex: true
  });

  console.log('Dominant Color:', dominantColor);
  console.log('Other Colors:', colors);    
})();

```

### Node.js Environment

```typescript
import { createColorExtractor } from '@j-ho/image-colors/node';

async function handleUploads(req, res) {
    const colorExtractor = await createColorExtractor();
    
    const result = await colorExtractor.extractColors({
        imageSource: req.file.path,
        k: 5,
        sampleRate: 0.1,
        onFilterSimilarColors: true,
        useHex: true
    });

    res.json({ colors, dominantColor });
}
```

## API

### createColorExtractor(environment: 'browser' | 'node')

Creates a ColorExtractor instance suitable for your environment.

**extractColors(options)** Extracts colors from an image.

- **Options:**
  - `imageSource`: Image source (Image object in the browser, file path in Node.js)
  - `k`: Number of colors to extract (default: 5)
  - `sampleRate`: Pixel sampling rate (0-1, default: 0.1)
  - `onFilterSimilarColors`: Whether to filter similar colors (default: false)
  - `useHex`: Whether to return colors in HEX format (default: false)

- **Returns:**
  - `dominantColor`: The most dominant color
  - `colors`: Array of other extracted colors

## License

This project is licensed under the MIT License.

## Contributing

We welcome all forms of contributions, including bug reports, feature suggestions, and pull requests. For major changes, please open an issue first to discuss what you would like to change.
npm package: @j-ho/nestjs-rate-limiter
Description: A rate limiter for NestJS with support for Redis and in-memory storage.
Author: j-ho
Latest version: 0.1.4

# Nestjs-rate-limiter

This project provides a flexible and extensible rate limiter implementation for NestJS, allowing easy application of rate limits on routes using a decorator. It supports multiple storage backends and allows users to customize the key used for rate limiting.

## Features

- Easy-to-use decorator for applying rate limits on routes
- Supports multiple storage backends (Redis, in-memory, and easily extendable to others)
- Allows custom key generation functions for rate limiting
- Configurable through environment variables
- Thoroughly tested with unit and E2E tests

## Installation

To get started, install the package using npm:

```bash
npm install @j-ho/nestjs-rate-limiter
```

## Configuration

Set up environment variables to choose the storage backend. By default, it uses in-memory storage. To use Redis, set the following environment variables:

```dotenv
CACHE_TYPE=redis
REDIS_HOST=localhost
REDIS_PORT=6379
```

## Usage

1. Import the `RateLimiterModule` in your `app.module.ts`:

```typescript
import { Module } from '@nestjs/common';
import { RateLimiterModule } from '@j-ho/nestjs-rate-limiter';

@Module({
  imports: [RateLimiterModule],
  // ...
})
export class AppModule {}
```

2. Use the `@RateLimit` decorator on your controller methods:

```typescript
import { Controller, Get } from '@nestjs/common';
import { RateLimit } from '@j-ho/nestjs-rate-limiter';

@Controller()
export class TestController {
  @Get('test')
  @RateLimit(5, 60000) // 5 requests per minute, default key (IP)
  getTest() {
    return 'This is a rate-limited endpoint';
  }

  @Get('custom')
  @RateLimit(5, 60000, (req) => req.headers['user-agent']) // 5 requests per minute, custom key (User-Agent)
  getCustomTest() {
    return 'This is a custom rate-limited endpoint';
  }
}
```

## Extending the Rate Limiter

### Adding a New Cache Service

To add a new cache service:

1. Implement the `ICacheService` interface:

```typescript
import { ICacheService } from '@j-ho/nestjs-rate-limiter';

export class NewCacheService implements ICacheService {
  async get(key: string): Promise<string | null> {
    // Implementation
  }

  async set(key: string, value: string, ttl: number): Promise<void> {
    // Implementation
  }

  async clear(): Promise<void> {
    // Implementation
  }
}
```

2. Add the new service to the `CacheServiceFactory`:

```typescript
import { CacheServiceFactory } from '@j-ho/nestjs-rate-limiter';

CacheServiceFactory.prototype.create = function(type: string): ICacheService {
  switch (type) {
    case 'new-cache':
      return new NewCacheService();
    // ... other cases
  }
};
```

## Testing

To run the tests, use the following command:

```bash
npm run test
```

This will run both unit tests and E2E tests, ensuring the rate limiter functions correctly across different scenarios.

## Contributing

Contributions are welcome! Please submit a pull request or open an issue to discuss any changes or improvements.

## License

This project is licensed under the MIT License.
npm package: @j-ho/react-lazyload-image
Description: React Image Lazy Load Component
Author: j-ho
Latest version: 0.0.8

# react-lazyload-image

A lightweight and efficient React component that automatically loads images when they enter the viewport, improving performance by reducing initial page load time.

## Features

- 🚀 **Lazy Loading**: Loads images only when they enter the viewport.
- 🖼️ **Placeholder Support**: Displays a placeholder image before the actual image loads.
- 🔄 **Intersection Observer**: Utilizes the native `IntersectionObserver` API for efficient detection.
- 📦 **Lightweight**: No additional dependencies beyond React.
- 📱 **Responsive**: Works seamlessly across all devices and screen sizes.

## Installation

```bash
npm install react-lazyload-image
# or
yarn add react-lazyload-image
```

## Usage

```tsx
import React from 'react';
import LazyImage from 'react-lazyload-image';

function App() {
  return (
    <div className='app'>
      <h1>Lazy Loading Images Example</h1>

      <LazyImage
        src='https://example.com/large-image.jpg'
        alt='Lazy loaded image'
        placeholderSrc='https://example.com/small-placeholder.jpg'
        width={800}
        height={600}
        threshold={0.5}
      />
    </div>
  );
}

export default App;
```

## Props

| Prop           | Type   | Description                                           | Default             |
| -------------- | ------ | ----------------------------------------------------- | ------------------- |
| placeholderSrc | string | Placeholder image to show before the main image loads | Transparent 1x1 GIF |
| threshold      | number | Threshold for the IntersectionObserver (optional)     | 0.1                 |

## Browser Support

This component works in all modern browsers that support the IntersectionObserver API. For older browsers like IE11, consider using a polyfill.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © [j-ho](https://github.com/awesomelon)

`This README provides a clear and professional overview of the `react-lazyload-image` library, including its purpose, features, installation instructions, usage example, supported props, browser compatibility, and licensing information. Let me know if you need any further adjustments!`
npm package: @j-hooks/use-before-leave
Description: React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.
Author: Soonkwon Justin Hwang
Latest version: 1.0.0

# @j-hooks/use-before-leave

React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.

## Installation

#### yarn

`yarn add @j-hooks/use-before-leave`

#### npm

`npm i @j-hooks/use-before-leave`

## Usage

```js
import React from "react";
import useBeforeLeave from "@j-hooks/use-before-leave";

function App() {
  const beforeLeave = () => console.log("User is leaving...");
  useBeforeLeave(beforeLeave);
  return <h1>Hello j-hooks</h1>;
}
```

### Arguments

| Argument      | Type     | Description                                              | Required |
| ------------- | -------- | -------------------------------------------------------- | -------- |
| onBeforeLeave | function | Function to be called when the mouse leaves the document | yes      |
npm package: @j-hooks/use-confirm
Description: React Hook to ask the user for a confirmation before executing a function.
Author: Soonkwon
Latest version: 1.0.0

# @j-hooks/use-confirm

React Hook to ask the user for a confirmation before executing a function.

## Installation

#### yarn

`yarn add @j-hooks/use-confirm`

#### npm

`npm i @j-hooks/use-confirm`

## Usage

```js
import React from "react";
import useConfirm from "@j-hooks/use-confirm";

function App() {
  const deleteWorld = () => console.log("Deleting world...");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld);
  return <button onClick={confirmDelete}>Delete the world</button>;
}
```

### Arguments

| Argument  | Type     | Description                                         | Required |
| --------- | -------- | --------------------------------------------------- | -------- |
| message   | string   | Message to show the user on the confirmation propmt | yes      |
| onConfirm | function | Function to be executed when the user confirms      | yes      |
| onCancel  | function | Function to be executed when the user cancels       | no       |

### Return

| Return value | Type     | Description                                    | Default value |
| ------------ | -------- | ---------------------------------------------- | ------------- |
| function     | function | Function wrapped around the confirmation logic | null          |
npm package: @j-hooks/use-fade-in
Description: React Hook to fade in any element.
Author: Soonkwon Justin Hwang
Latest version: 1.0.0

# @j-hooks/use-fade-in

React Hook to fade in any element.

## Installation

#### yarn

`yarn add @j-hooks/use-fade-in`

#### npm

`npm i @j-hooks/use-fade-in`

## Usage

```js
import React from "react";
import useFadeIn from "@j-hooks/use-fade-in";

function App() {
  const fadeIn = useFadeIn(5, 10);
  return <h1 {...fadeIn}>This will fade in.</h1>;
}
```

### Arguments

| Argument | Type   | Description                                     | Required | Default value |
| -------- | ------ | ----------------------------------------------- | -------- | ------------- |
| duration | number | Sets the duration of the transition. In seconds | no       | 1             |
| delay    | number | Delays of transition's start. In seconds        | no       | 0             |

### Return

`useScroll` returns an object containing the following:

| Name  | Type      | Description                                                               |
| ----- | --------- | ------------------------------------------------------------------------- |
| ref   | React Ref | A ref created to fadeIn the element                                       |
| style | Object    | Style object containing `{opacity:0}` to give to the element as a default |

It's recommended to just spread the returned object on the element as shown in the Usage section above.
npm package: @j-hooks/use-fullscreen
Description: React Hook to make any element go Fullscreen
Author: Soonkwon Justin Hwang
Latest version: 1.0.0

# @j-hooks/use-fullscreen

React Hook to make any element go Fullscreen

## Installation

#### yarn

`yarn add @j-hooks/use-fullscreen`

#### npm

`npm i @j-hooks/use-fullscreen`

## Usage

```js
import React from "react";
import useFullscreen from "@j-hooks/use-fullscreen";

function App() {
  const onChange = (isFull) =>
    console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
}
```

### Arguments

| Argument | Type     | Description                                                       | Arguments        | Required |
| -------- | -------- | ----------------------------------------------------------------- | ---------------- | -------- |
| onChange | function | Function to be called when the screen goes Fullscreen or exits is | isFull : Boolean | no       |

### Return

`useFullscreen` returns an object containing the following:

| Return value | Type      | Description                                                |
| ------------ | --------- | ---------------------------------------------------------- |
| element      | React Ref | Ref to add to the element that you want to make fullscreen |
| triggerFull  | Function  | Function to make the element enter fullscreen              |
| exitFull     | Function  | Function to make the document exit fullscreen              |
npm package: @j-hooks/use-hover
Description: React Hook to detect a hover on an any React Element
Author: Soonkwon Justin Hwang
Latest version: 1.0.0

# @j-hooks/use-hover

React Hook to detect a hover on an any React Element

## Installation

#### yarn

`yarn add @j-hooks/use-hover`

#### npm

`npm i @j-hooks/use-hover`

## Usage

```js
import React from "react";
import useHover from "@j-hooks/use-hover";

function App() {
  const onHover = () => console.log("Somebody hovered!");
  const markedRef = useClick(onHover);
  return <h1 ref={markedRef}>Hello j-hooks</h1>;
}
```

### Arguments

| Argument | Type     | Description                                       | Required |
| -------- | -------- | ------------------------------------------------- | -------- |
| onHover  | function | Function to be called when the element is hovered | yes      |

### Return

| Return value | Type      | Description                                                     | Default value |
| ------------ | --------- | --------------------------------------------------------------- | ------------- |
| ref          | React Ref | A React Ref listening to the hover event, add it to any element | null          |
npm package: @j-hooks/use-network
Description: React Hook to listen when the user goes online or offline.
Author: Soonkwon Justin Hwang
Latest version: 1.0.1

# @j-hooks/use-network

React Hook to listen when the user goes online or offline.

## Installation

#### yarn

`yarn add @j-hooks/use-network`

#### npm

`npm i @j-hooks/use-network`

## Usage

```js
import React from "react";
import useNetwork from "@j-hooks/use-network";

function App() {
  const onNetworkChange = (isOnline) =>
    console.log(isOnline ? "We are back online" : "We just got offline");
  const isOnline = useNetwork(onNetworkChange);
  return <h1>{isOnline ? "We are online" : "We are offline"}</h1>;
}
```

### Arguments

| Argument        | Type     | Description                                           | Arguments          | Required |
| --------------- | -------- | ----------------------------------------------------- | ------------------ | -------- |
| onNetworkChange | function | Function to be called when the network status changes | isOnline : Boolean | no       |

### Return

| Return value | Type    | Description                                         | Default value |
| ------------ | ------- | --------------------------------------------------- | ------------- |
| isOnline     | Boolean | A boolean representing if the user is online or not | true          |
npm package: @j-hooks/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Author: Soonkwon Justin Hwang
Latest version: 1.0.0

# @j-hooks/use-prevent-leave

React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.

## Installation

#### yarn

`yarn add @j-hooks/use-prevent-leave`

#### npm

`npm i @j-hooks/use-prevent-leave`

## Usage

```js
import React from "react";
import usePreventLeave from "@j-hooks/use-prevent-leave";

function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  const saveChanges = async () => {
    enablePrevent();
    await sendToApi();
    disablePrevent();
  };
  return <button onClick={saveChanges}>Save changes</button>;
}
```

### Return

| Return value | Type   | Description                                                                                                                     |
| ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------- |
| Functions    | Object | A object containing functions `enablePrevent` and `disablePrevent`, use this functions to enable/disable the leaving prevention |
npm package: @j-hooks/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll.
Author: Soonkwon Justin Hwang
Latest version: 1.0.0

# @j-hooks/use-scroll

React Hook to get X/Y coordinates of current position of the scroll.

## Installation

#### yarn

`yarn add @j-hooks/use-scroll`

#### npm

`npm i @j-hooks/use-scroll`

## Usage

```js
import React from "react";
import useScroll from "@j-hooks/use-scroll";

function App() {
  const { x, y } = useScroll();
  return (
    <h1>
      We are in: {x} / {y}
    </h1>
  );
}
```

### Return

| Return value | Type   | Description                                                             | Default value |
| ------------ | ------ | ----------------------------------------------------------------------- | ------------- |
| Coords       | Object | An object containing the x/y coordinates of the current scroll position | `{x:0, y:0}`  |
npm package: @j-hooks/use-title
Description: React Hook to update your document's title.
Author: Soonkwon Hwang
Latest version: 1.0.0

# @j-hooks/use-title

React Hook to update your document's title.

## Installation

#### yarn

`yarn add @j-hooks/use-title`

#### npm

`npm i @j-hooks/use-title`

## Usage

```js
import React from "react";
import useTitle from "@j-hooks/use-title";

function App() {
  useTitle("Welcome");
  // const titleUpdater = useTitle("Loading...");
  // setTimeout(()=>titleUpdater("Home"), 5000);
  return <h1>Welcome</h1>;
}
```

### Arguments

| Argument | Type   | Description                                | Required |
| -------- | ------ | ------------------------------------------ | -------- |
| title    | string | The title you want to use on your document | yes      |
npm package: @j-kallunki/css-in-to-js
Description: CSS to CSS-in-JS and Styled converter
Author: Joonas Kallunki
Latest version: 1.0.6

# @j-kallunki/css-in-to-js

[![travis build](https://img.shields.io/travis/J-Kallunki/css-in-to-js.svg?style=flat-square)](https://travis-ci.org/J-Kallunki/css-in-to-js)
[![codecov coverage](https://img.shields.io/codecov/c/github/J-Kallunki/css-in-to-js.svg?style=flat-square)](https://codecov.io/github/J-Kallunki/css-in-to-js)
[![version](https://img.shields.io/npm/v/@j-kallunki/css-in-to-js.svg?style=flat-square)](http://npm.im/@j-kallunki/css-in-to-js)
[![downloads](https://img.shields.io/npm/dm/@j-kallunki/css-in-to-js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@j-kallunki/css-in-to-js&from=2015-08-01)
[![MIT License](https://img.shields.io/npm/l/@j-kallunki/css-in-to-js.svg?style=flat-square)](http://opensource.org/licenses/MIT)

Convert any CSS-string to Styled-format object or CSS-in-JS object with CSS-declarations as strings.

## Usage

```bash
yarn add @j-kallunki/css-in-to-js
OR
npm install --save @j-kallunki/css-in-to-js
```
```javascript
import { cssToJs } from '@j-kallunki/css-in-to-js';
const cssObject = cssToJs(cssString);
```

## Settings

### `cssToString`

If you wan't to get CSS-declarations in CSS-string format use:
```javascript
const cssObject = cssToJs(cssString, { cssToString: true })
```

## Tools

### `minifyCss()`

Minify CSS-string

## Acknowledgements

Uses [PostCSS](https://github.com/postcss/postcss) for parsing the CSS.
npm package: @j-kyoda/my-vue-components-lib
Description: A collection of reusable Vue components.
Author: j-kyoda
Latest version: 0.1.0

# my-vue-components-lib

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```