open-index/open-npm huggingface dataset:
npm package: @m0ksem/vue-custom-scrollbar
Description: Custom scrollbar for vue3.
Latest version: 0.0.7

# Vue custom scrollbar

Custom scrollbar for vue3.

## Instalation

```sh
yarn add @m0ksem/vue-custom-scrollbar
```

```ts
// main.js
import '@m0ksem/vue-custom-scrollbar/css'
import { VueCustomScrollbar } from '@m0ksem/vue-custom-scrollbar'
...
app.component('scrollbar', VueCustomScrollbar)
```

For nuxt3, lib needs to be transpiled.

## Component api

### Props
| Name | Type | Description | Default | 
| ---- | ---- | ----------- | ------- | 
| top |  Boolean | Renders top scrollbar |  false|
| left |  Boolean | Renders left scrollbar |  false |
| bottom |  Boolean | Renders bottom scrollbar |  false |
| right |  Boolean | Renders right scrollbar |  false |
| inner |  Boolean | Renders scrollbar inside of container |  false |
| thickness |  [String, Number] | Thichness of scrollbar | - |
| color |  String | Tumb color |  '#9d4edd' |
| trackColor |  String | Scrollbar background color |  '#3c096c'|

### Slots
| Name | Description | Bind |
| ---- | ----------- | ---- |
| default | Content inside scrollbale container | - | 
| thumb | Thing that user need to move using mouse | `ScrollbarSlotBind` |
| track | Scrollbar background | `ScrollbarSlotBind` |

```ts
type ScrollbarSlotBind = {
  horizontal: boolean,
  vertical: boolean,
  placement: 'horizontal' | 'vertical',
  focused: boolean
}
```

## Usage example

```vue
<script setup lang="ts">
import { VueCustomScrollbar } from '@m0ksem/vue-custom-scrollbar'
</script>

<template>
  <VueCustomScrollbar style="height: 500px; width: 300px" thickness="16px" right bottom left top trackColor="transparent" inner>
    <div class="test-long-thing" />

    <template #thumb="{ placement, focused }">
      <div 
        class="custom-thumb" 
        :class="{
         [`custom-thumb--${placement}`]: true,
          'custom-thumb--focused': focused 
        }"
      />
    </template>
  </VueCustomScrollbar>
</template>

<style lang="scss">
  .test-long-thing {
    background: linear-gradient(45deg, #10002b, #e0aaff);
    overflow: auto;
    resize: both;
    height: 1000px;
    width: 1000px;
  }

  .custom-thumb {
    transition: all 0.5s ease;
    &--horizontal {
      background: linear-gradient(90deg, #480ca8, #4895ef);
    }

    &--vertical {
      background: linear-gradient(0, #480ca8, #4895ef);
    }

    &--focused {
      &.custom-thumb {
        &--horizontal {
          background: linear-gradient(90deg, #c307e4, #5c5af3);
        }

        &--vertical {
          background: linear-gradient(0, #c307e4, #5c5af3);
        }
      }
    }
  }
</style>
```
npm package: @m0ksem/vue-glsl
Description: ## Usage
Latest version: 0.0.5

# VueGLSL

## Usage

1. Import component 

```ts
import Shader2d from './components/shader-2d.vue'
```

```html
<Shader2d :fragment="fragment" @ready="onCanvasReady" />
```

2. Create fragment shader 
```ts
const fragment = 
`precision highp float;
uniform float time;

void main() {
  gl_FragColor = vec4(sin(time), cos(time), sin(time), 1.0);
}
`
```
3. Create event listener:

```ts
let time = 0;

const onCanvasReady = ({ draw, getUniform, gl }: VueGLSLReadyEvent) => {
    const timeHandle = getUniform('time');

    let lastFrame = Date.now();
    let thisFrame: number;

    // Will be executed each frame
    draw(() => {
      thisFrame = Date.now();
      time += (thisFrame - lastFrame) / (100 * 60);	
      lastFrame = thisFrame;

      gl.uniform1f(timeHandle, time);
  
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    })
}
```
npm package: @m0n0lab/is-even
Description: [![npm version](https://img.shields.io/npm/v/@m0n0lab/is-even.svg)](https://www.npmjs.com/package/@m0n0lab/is-even) [![is-even coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=is-even)](https://codecov.io/gh/pabloimrik17/monolab?flag=is
Author: Pablo F.G.
Latest version: 2.1.4

# @m0n0lab/is-even

[![npm version](https://img.shields.io/npm/v/@m0n0lab/is-even.svg)](https://www.npmjs.com/package/@m0n0lab/is-even)
[![is-even coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=is-even)](https://codecov.io/gh/pabloimrik17/monolab?flag=is-even)
[![is-even bundle](https://codecov.io/gh/pabloimrik17/monolab/graph/bundle/is-even/badge.svg)](https://codecov.io/gh/pabloimrik17/monolab/bundle/is-even)

A simple, well-tested utility to check if a number is even. Perfect for number validation, mathematical operations, conditional logic, and filtering.

## Features

-   🎯 Simple and intuitive API
-   ✅ Fully typed with TypeScript
-   🧪 100% test coverage
-   📦 Zero dependencies
-   ⚡ Lightweight and fast
-   🔒 Secure and reliable
-   🚀 Production ready
-   📘 Well documented

## Installation

### npm

```bash
npm install @m0n0lab/is-even
```

### pnpm

```bash
pnpm add @m0n0lab/is-even
```

### JSR

```bash
npx jsr add @m0n0lab/is-even
```

## Usage

```typescript
import { isEven, isNotEven } from "@m0n0lab/is-even";

// Check if a number is even
console.log(isEven(2)); // true
console.log(isEven(3)); // false
console.log(isEven(0)); // true

// Check if a number is not even (odd)
console.log(isNotEven(3)); // true
console.log(isNotEven(2)); // false
console.log(isNotEven(1)); // true
```

## API

### `isEven(value: number): boolean`

Returns `true` if the number is even, `false` otherwise.

### `isNotEven(value: number): boolean`

Returns `true` if the number is not even (i.e., odd), `false` otherwise.

## License

MIT
npm package: @m0n0lab/is-odd
Description: [![npm version](https://img.shields.io/npm/v/@m0n0lab/is-odd.svg)](https://www.npmjs.com/package/@m0n0lab/is-odd) [![is-odd coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=is-odd)](https://codecov.io/gh/pabloimrik17/monolab?flag=is-odd
Author: Pablo F.G.
Latest version: 5.1.4

# @m0n0lab/is-odd

[![npm version](https://img.shields.io/npm/v/@m0n0lab/is-odd.svg)](https://www.npmjs.com/package/@m0n0lab/is-odd)
[![is-odd coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=is-odd)](https://codecov.io/gh/pabloimrik17/monolab?flag=is-odd)
[![is-odd bundle](https://codecov.io/gh/pabloimrik17/monolab/graph/bundle/is-odd/badge.svg)](https://codecov.io/gh/pabloimrik17/monolab/bundle/is-odd)

A simple, well-tested utility to check if a number is odd. Perfect for number validation, mathematical operations, conditional logic, and filtering.

## Features

-   🎯 Simple and intuitive API
-   ✅ Fully typed with TypeScript
-   🧪 100% test coverage
-   📦 Zero dependencies
-   ⚡ Lightweight and fast
-   🔒 Secure and reliable
-   🚀 Production ready
-   📘 Well documented

## Installation

### npm

```bash
npm install @m0n0lab/is-odd
```

### pnpm

```bash
pnpm add @m0n0lab/is-odd
```

### JSR

```bash
npx jsr add @m0n0lab/is-odd
```

## Usage

```typescript
import { isOdd, isNotOdd } from "@m0n0lab/is-odd";

// Check if a number is odd
console.log(isOdd(3)); // true
console.log(isOdd(2)); // false

// Check if a number is not odd (even)
console.log(isNotOdd(2)); // true
console.log(isNotOdd(3)); // false
```

## API

### `isOdd(value: number): boolean`

Returns `true` if the number is odd, `false` otherwise.

### `isNotOdd(value: number): boolean`

Returns `true` if the number is not odd (i.e., even), `false` otherwise.

## License

MIT
npm package: @m0n0lab/react-clean
Description: [![npm version](https://img.shields.io/npm/v/@m0n0lab/react-clean.svg)](https://www.npmjs.com/package/@m0n0lab/react-clean) [![react-clean coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=react-clean)](https://codecov.io/gh/pabloimrik17
Author: Pablo F.G.
Latest version: 3.1.4

# @m0n0lab/react-clean

[![npm version](https://img.shields.io/npm/v/@m0n0lab/react-clean.svg)](https://www.npmjs.com/package/@m0n0lab/react-clean)
[![react-clean coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=react-clean)](https://codecov.io/gh/pabloimrik17/monolab?flag=react-clean)
[![react-clean bundle](https://codecov.io/gh/pabloimrik17/monolab/graph/bundle/react-clean/badge.svg)](https://codecov.io/gh/pabloimrik17/monolab/bundle/react-clean)

MVVM pattern library using Inversify (IoC) and RxJS for reactive state management in React applications. Build scalable and maintainable apps.

## Features

-   🚀 Production ready
-   📘 Well documented

## Installation

### npm

```bash
npm install @m0n0lab/react-clean
```

### pnpm

```bash
pnpm add @m0n0lab/react-clean
```

### JSR

```bash
npx jsr add @m0n0lab/react-clean
```

## Usage

```typescript
import { BaseViewModel } from "@m0n0lab/react-clean";
import { injectable } from "inversify";

@injectable()
class MyViewModel extends BaseViewModel {
    // Your view model logic
}
```

## License

MIT
npm package: @m0n0lab/react-hooks
Description: [![npm version](https://img.shields.io/npm/v/@m0n0lab/react-hooks.svg)](https://www.npmjs.com/package/@m0n0lab/react-hooks) [![react-hooks coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=react-hooks)](https://codecov.io/gh/pabloimrik17
Author: Pablo F.G.
Latest version: 1.1.4

# @m0n0lab/react-hooks

[![npm version](https://img.shields.io/npm/v/@m0n0lab/react-hooks.svg)](https://www.npmjs.com/package/@m0n0lab/react-hooks)
[![react-hooks coverage](https://codecov.io/gh/pabloimrik17/monolab/badge.svg?flag=react-hooks)](https://codecov.io/gh/pabloimrik17/monolab?flag=react-hooks)
[![react-hooks bundle](https://codecov.io/gh/pabloimrik17/monolab/graph/bundle/react-hooks/badge.svg)](https://codecov.io/gh/pabloimrik17/monolab/bundle/react-hooks)

A collection of React lifecycle hooks for functional components. Simplify your React development with clean, reusable, well-tested, and type-safe hooks.

## Features

-   🚀 Production ready
-   📘 Well documented

## Installation

### npm

```bash
npm install @m0n0lab/react-hooks
```

### pnpm

```bash
pnpm add @m0n0lab/react-hooks
```

### JSR

```bash
npx jsr add @m0n0lab/react-hooks
```

## Usage

```typescript
import { useDidMount, useWillUnmount } from "@m0n0lab/react-hooks";

function MyComponent() {
    useDidMount(() => {
        console.log("Component mounted");
    });

    useWillUnmount(() => {
        console.log("Component will unmount");
    });

    return <div>Hello World</div>;
}
```

## API

### `useDidMount(callback: () => void): void`

Executes the callback once when the component mounts.

### `useWillUnmount(callback: () => void): void`

Executes the callback when the component is about to unmount.

## License

MIT