open-index/open-npm huggingface dataset:
npm package: @qreverb/cbutils
Description: A typescript utils library base on vite
Author: Bruce jsonp@foxmail.com
Latest version: 0.0.16

# 前端工具函数库
A typescript utils library base on vite.

## Installation
```sh

$ yarn add @qreverb/cbutils -S

# or

$ npm i @qreverb/cbutils -S

```

## Examples

```javascript

import {  compareVersion, 
          createUUID, 
          getCookie, 
          getMonitorParams, 
          getUrlParams, 
          goToApp, 
          isAndroid, 
          isAppWebView, 
          isIos, 
          isWechatMiniApp, 
          jsonToAppParams, 
          removeCookie, 
          setCookie, 
        } from 'cbutils'

compareVersion("3.2.0") // => 当前版本是3.2.0以下为true
compareVersion("3.2.0", "1.0.0");// => false
compareVersion("3.2.0","4.0.0");// => true

createUUID();// => 4e0b9c2b-b570-4e08-8411-28962e57094f

getCookie("token");// => 1a2b3c1d2e3f1a2b3c1d2e3f

// 组合统计埋点的参数
getMonitorParams({
  eventId: 'abc',
  eventType: 2, // 非必须
  extra: {abc: 123} // 非必须
}) 

getUrlParams("version");// => 3.0.0
getUrlParams("backUrl");// => https%3A%2F%2Fwww.xxx.com
getUrlParams("backUrl",1);// => https://www.xxx.com

goToApp("login", "-1")
goToApp("changeTitle", `title==哈哈哈`)
goToApp("changeTitle", {title: "哈哈哈"})

isAndroid() // true||false 是否安卓系统
isIos() // true||false 是否ios系统

isAppWebView() // 是否 app webview 环境

isWechatMiniApp() // 是否微信小程序环境

jsonToAppParams({a: 1, b: 2}) // "a==1||b==2"

removeCookie("token") 

setCookie({
  key: 'token',
  value: "1232fsfasfgadv",
  options: { // 非必须
    domain: 'xxx.com',
    path: '/'
  }
})

```
npm package: @qrgrid/angular
Description: The Ultimate Customizable QR Code JavaScript Library
Latest version: 1.1.2

# Qr Grid Angular

This library offers two methods for generating QR codes: using **Canvas** and **Svg**. It also includes utility functions for downloading images and styling QR codes.

> [!NOTE]
> For complete documentation visit: [qrgrid.dev](https://www.qrgrid.dev/)

## Key Features

- **Canvas-based QR Code Generation**: Create QR codes using the HTML5 Canvas element for high-performance rendering.
- **SVG-based QR Code Generation**: Generate QR codes as scalable vector graphics (SVG) for infinite scalability without loss of quality.
- **Utility Functions**: Easily download QR codes as images and apply custom styles.

## Installation

```bash
npm i @qrgrid/angular
```

## Using Canvas

```javascript
import { CanvasQr } from "@qrgrid/react";

<qr input="Hello World!"/>
```

## Using Svg

```javascript
import { SvgQr } from "@qrgrid/react";

<qr input="Hello World!"/>
```
npm package: @qrgrid/cli
Description: The Ultimate Customizable QR Code JavaScript Library
Latest version: 1.0.2

# Qr Grid cli

> [!NOTE]
> For complete documentation visit: [qrgrid.dev](https://www.qrgrid.dev/)

## Installation

All the qrgrid packages are available through [npm](https://www.npmjs.com/search?q=qrgrid)

```bash
# npm
npm i @qrgrid/cli
```
npm package: @qrgrid/core
Description: The Ultimate Customizable QR Code JavaScript Library
Latest version: 0.2.4

# Qr Grid Core

This package serves as the foundational component for encoding QR codes, utilized by all other qrgrid packages. For maximum customization and full control over QR code generation, it is recommended to use this core package directly.

> [!NOTE]
> For complete documentation visit: [qrgrid.dev](https://www.qrgrid.dev/)

## Installation

All the qrgrid packages are available through [npm](https://www.npmjs.com/search?q=qrgrid)

```bash
# npm
npm i @qrgrid/core
```

## Usage

The QR constructor expects two parameters:

- inputData (string): The input string to encode in the QR code.
- options (QrOptions): Optional settings for QR code generation.

```typescript
QR(
inputData: string,
options?: QrOptions,
)
// where QrOptions is:
type QrOptions = {errorCorrection?: keyof typeof ErrorCorrectionLevel};
// where ErrorCorrectionLevel is:
enum ErrorCorrectionLevel {
  L = "L",
  M = "M",
  Q = "Q",
  H = "H",
}
```

The QR class has the following public properties

``` typescript
// QR Properties
{
  inputData: string; // input data passed in the constructor
  segments: Segments; // segments of the input data to make the qr
  data: Uint8Array; // qr data in 1's and 0's representing the dark and light module of qr
  gridSize: number; // modules in qr ex: 21 represents 21 x 21 for version 1
  version: number; // qr version
  errorCorrection: ErrorCorrectionLevel; // errorCorrection used
  reservedBits: { [key: number]: { type: ReservedBits; dark: boolean } }; // reserved bits used
  maskPattern: number; // mask pattern used
}
// where
type Segments = Array<{ value: string; mode: Mode }>;
enum Mode {
  Numeric = "Numeric",
  AlphaNumeric = "AlphaNumeric",
  Byte = "Byte",
  Kanji = "Kanji",
}
```

## Example

Implementing in a web project using canvas

```typescript
import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!")

// get the canvas element
const canvas = document.getElementById("defaultQrCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;
const canvasSize = 400;
// calculate module size and adjusting canvas to height and wight 
let size = Math.floor(canvasSize / (qr.gridSize + 1.5));
const border = Math.ceil(size * qr.gridSize - canvasSize) + size * 2;
canvas.height = canvasSize + border;
canvas.width = canvasSize + border;
// module color
ctx.fillStyle = "white";
// placing each modules in x,y position in the canvas using fillRect
let x = size;
let y = size;
for (let i = 0; i < qr.data.length; i++) {
  const bit = qr.data[i];
  if (bit) {
    ctx.fillRect(x, y, size, size);
  }
  x += size;
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = size;
    y += size;
  }
}
// background color (optional)
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvasSize + border, canvasSize + border);
```
npm package: @qrgrid/react
Description: The Ultimate Customizable QR Code JavaScript Library QR Grid for react
Latest version: 1.3.5

# Qr Grid React

This library offers two methods for generating QR codes: using **Canvas** and **Svg**. It also includes utility functions for downloading images and styling QR codes.

> [!NOTE]
> For complete documentation visit: [qrgrid.dev](https://www.qrgrid.dev/)

## Key Features

- **Canvas-based QR Code Generation**: Create QR codes using the HTML5 Canvas element for high-performance rendering.
- **SVG-based QR Code Generation**: Generate QR codes as scalable vector graphics (SVG) for infinite scalability without loss of quality.
- **Utility Functions**: Easily download QR codes as images and apply custom styles.

## Installation

```bash
npm i @qrgrid/react
```

## Using Canvas

```javascript
import { Canvas } from "@qrgrid/react";

<Canvas.Qr input="Hello World!"/>
```

OR

```javascript
import { Qr } from "@qrgrid/react/canvas";

<Qr input="Hello World!"/>
```

## Using Svg

```javascript
import { Svg } from "@qrgrid/react";

<Svg.Qr input="Hello World!"/>
```

OR

```javascript
import { Qr } from "@qrgrid/react/svg";

<Qr input="Hello World!"/>
```
npm package: @qrgrid/server
Description: The Ultimate Customizable QR Code JavaScript Library
Latest version: 1.0.1

# Qr Grid server

> [!NOTE]
> For complete documentation visit: [qrgrid.dev](https://www.qrgrid.dev/)

## Installation

All the qrgrid packages are available through [npm](https://www.npmjs.com/search?q=qrgrid)

```bash
# npm
npm i @qrgrid/server
```
npm package: @qrgrid/vue
Description: The Ultimate Customizable QR Code JavaScript Library QR Grid for vue
Latest version: 1.4.6

# Qr Grid Vue

This library offers two methods for generating QR codes: using **Canvas** and **Svg**. It also includes utility functions for downloading images and styling QR codes.

> [!NOTE]
> For complete documentation visit: [qrgrid.dev](https://www.qrgrid.dev/)

## Key Features

- **Canvas-based QR Code Generation**: Create QR codes using the HTML5 Canvas element for high-performance rendering.
- **SVG-based QR Code Generation**: Generate QR codes as scalable vector graphics (SVG) for infinite scalability without loss of quality.
- **Utility Functions**: Easily download QR codes as images and apply custom styles.

## Installation

```bash
npm i @qrgrid/vue
```

## Using Canvas

```javascript
import { Canvas } from "@qrgrid/react";

<Canvas input="Hello World!"/>
```

OR

```javascript
import { Qr } from "@qrgrid/react/canvas";

<Qr input="Hello World!"/>
```

## Using Svg

```javascript
import { Svg } from "@qrgrid/react";

<Svg input="Hello World!"/>
```

OR

```javascript
import { Qr } from "@qrgrid/react/svg";

<Qr input="Hello World!"/>
```
npm package: @qrioblog/cli
Description: CLI tool to generate static blog pages from Qrioblog backend for React frameworks
Author: Qriomatrix
Latest version: 0.1.2

# @qrioblog/cli

CLI tool to generate static blog pages from Qrioblog backend for React frameworks (Vite, Next.js, Gatsby, etc.)

📖 **[Read the Full Developer Guide](./DEVELOPER_GUIDE.md)** for advanced integration and SDK usage.

## Installation

```bash
npm install -g @qrioblog/cli
# or use in project
npm install --save-dev @qrioblog/cli
```

## Quick Start

1. Initialize configuration:
```bash
qrioblog init
```

2. Generate blog pages:
```bash
qrioblog generate
```

## Configuration

Create `qrioblog.config.js` in your project root:

```javascript
module.exports = {
  apiBaseUrl: 'https://0h2s1cs0s2.execute-api.us-east-1.amazonaws.com/prod',
  apiKey: '', // Optional: for future authentication
  outputDir: 'public/blog', // or 'dist/blog', 'out/blog'
  routePrefix: '/blog',
  generateCategoryPages: true,
  generateGroupPages: true,
  template: {
    listLayout: 'grid', // or 'list'
    postsPerPage: 10,
  }
};
```

## Commands

- `qrioblog init` - Create configuration file
- `qrioblog generate` - Fetch posts and generate static pages
- `qrioblog watch` - Watch mode for development
- `qrioblog clean` - Remove generated files

## Framework Integration

### Vite
Add to your build script:
```json
{
  "scripts": {
    "prebuild": "qrioblog generate"
  }
}
```

### Next.js
Same as Vite, or use in `next.config.js`

### Gatsby
Add to `gatsby-node.js` or use prebuild hook

## License

MIT
npm package: @qriousgabriel/react-countdown-hook
Description: A count down hook for React
Author: qriousgabriel
Latest version: 1.0.0

# react-countdown-hook

> A very simple count down hook for React.

[![NPM](https://img.shields.io/npm/v/@qriousgabriel/react-countdown-hook.svg)](https://www.npmjs.com/package/@qriousgabriel/react-countdown-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

### NPM

```bash
npm install --save @qriousgabriel/react-countdown-hook
```

### Yarn

```bash
yarn add @qriousgabriel/react-countdown-hook
```

## Usage

```tsx
// Timer.tsx

import * as React from 'react'
import useCountDown from '@qriousgabriel/react-countdown-hook'

export const Timer = () => {
  const { counter, pause, resume, isPaused } = useCountDown(120, 1000)
  const toggleTimer = () => {
    isPaused ? resume() : pause()
  }
  return (
    <React.Fragment>
      <div>Counter: {counter}</div>
      <button onClick={toggleTimer}>{isPaused ? 'Resume' : 'Pause'}</button>
    </React.Fragment>
  )
}
```

## License

MIT © [qriousgabriel](https://github.com/qriousgabriel)