open-index/open-npm huggingface dataset:
npm package: @nixjs23n6/qrcode-react
Description: A React component to generate QRCode.
Author: nghinv
Latest version: 0.0.1

# @nixjs23n6/qrcode-react

A React component to generate QRCode.

## Install

```typescript
yarn add @nixjs23n6/qrcode-react
```

## Interface

```typescript

export interface QRCodePropArg {
    value: string
    ecLevel?: 'L' | 'M' | 'Q' | 'H'
    enableCORS?: boolean
    size?: number
    margin?: number
    bgColor?: string
    fgColor?: string
    qrStyle?: 'squares' | 'dots'
    imageSettings?: ImageSettings
    className?: string
}

export interface ImageSettings {
    image?: string
    opacity?: number
    height?: number
    width?: number
}
```

### `value`

The value of the QR code. **[Required]**

### `ecLevel`

QR codes support four levels of error correction to enable recovery of missing, misread, or obscured data. Greater redundancy is achieved at the cost of being able to store less data.  Know more, [wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction).

Possible levels are shown below:

| Level            | Error resistance |
|------------------|:----------------:|
| **L** (Low)      | **~7%**          |
| **M** (Medium)   | **~15%**         |
| **Q** (Quartile) | **~25%**         |
| **H** (High)     | **~30%**         |

**Default**: `M`

### `enableCORS`

Allowing cross-origin use of images and canvas.**Default**: `false`

### `size`

Image size.**Default**: `125`

### `margin`

The width of the white border around the data portion of the code.**Default**: `15`

### `bgColor`

The background color of QRcode.**Default**: `#FFFFFF`

### `fgColor`

The foreground color of QRcode.**Default**: `#000000`

### `qrStyle`

Style QRcode: `'squares' | 'dots'`.**Default**: `squares`

### `imageSettings`

Allow user to add logo on QRcode.**Default**: `{ opacity: 1, height: 30, width: 30, image: '' }`

```typescript
export interface ImageSettings {
    image?: string
    opacity?: number
    height?: number
    width?: number
}
```

#### `ImageSettings.image`

Logo Image Path or Base64 encoded image.

#### `ImageSettings.opacity`

Set opacity for logo.

#### `ImageSettings.height`

fixed logo height.

#### `ImageSettings.width`

Fixed logo width.

### `className`

Additional CSS class names to add to the container.

## Example

```typescript
import { QRCode } from "@nixjs23n6/qrcode-react"
export const Render = () => <QRCode value="0x2fEC6379E9a0B88D7c4C0BdC20adcFC7A23C3B68"
                imageSettings={{image: 'https:\\cdn.demo.com/busd.svg'}}
                bgColor="#e7e7e7"
                className="qrcode-my-address"
            />
```
npm package: @nixjs23n6/react-nest-providers
Description: A lightweight, type-safe utility for composing multiple React providers into a single, nested tree. Simplify your provider setup with a clean, declarative API that supports optional props and seamless integration with TypeScript. Perfect for managing cont
Author: nghinv
Latest version: 0.0.2

# @nixjs23n6/react-nest-providers

A lightweight, type-safe utility for composing multiple React providers into a single, nested tree. Simplify your provider setup with a clean, declarative API that supports optional props and seamless integration with TypeScript. Perfect for managing context providers in large-scale React applications. 

## Features:  
- Effortlessly nest multiple providers with a single function  

- Full TypeScript support with automatic prop inference  

- Flexible API for providers with or without props  

- Zero dependencies, minimal footprint



## Install

```shell [npm]
npm install @nixjs23n6/react-nest-providers
```

```shell [pnpm]
pnpm add @nixjs23n6/react-nest-providers
```

```shell [yarn]
yarn add @nixjs23n6/react-nest-providers
```

```shell [bun]
bun add @nixjs23n6/react-nest-providers
```

## Example

```typescript
import { buildProvidersTree } from '@nixjs23n6/react-nest-providers';

const ProviderTree = buildProvidersTree([
  [AuthProvider],
  [ThemeProvider, { theme: 'dark' }],
  [ValueProvider, { value: 10 }],
]);

function App() {
  return <ProviderTree><YourApp /></ProviderTree>;
}
```
npm package: @nixjs23n6/telegram-login
Description: A Component React for Telegram Login.
Author: nghinv
Latest version: 1.0.0

# @nixjs23n6/telegram-login

A Component React for Telegram Login

## Quick Setup

### Install

Install these dependencies:

`yarn add @nixjs23n6/telegram-login`

### Setup & Usage

```typescript
import { TelegramButton, TelegramUser } from '@nixjs23n6/telegram-login'

interface LoginPropArg {}

export const Login: React.FC<LoginPropArg> = () => {
    const responseTelegram = (response: TelegramUser) => console.log(response)

    return (<TelegramButton dataOnAuth={responseTelegram} botName={__TELEGRAM_BOT__}/>)
}
```
npm package: @nixjs23n6/ts-countdown-react
Description: A customizable countdown component for React.
Author: nghinv
Latest version: 1.0.0

# @nixjs23n6/ts-countdown-react

A customizable countdown component for React.

## Quick Setup

### Install

Install these dependencies:

`yarn add @nixjs23n6/ts-countdown-react`

### Setup & Usage

```typescript
import { Countdown } from '@nixjs23n6/ts-countdown-react'

export const CountdownPreview = () => (<Countdown target={1679998574} options={{ day: 'days', hour: 'hrs', minute: 'mins', second: 'secs' }}/>)
```
npm package: @nixjs23n6/ts-enumify
Description: Generates a enum (like an object) with keys and values based on the elements of an array.
Author: nghinv
Latest version: 0.0.1

# @nixjs23n6/ts-enumify

Generates a enum (like an object) with keys and values based on the elements of an array.

## Install

```shell [npm]
npm install @nixjs23n6/ts-enumify
```

```shell [pnpm]
pnpm add @nixjs23n6/ts-enumify
```

```shell [yarn]
yarn add @nixjs23n6/ts-enumify
```

```shell [bun]
bun add --dev husky
```

## Example

```typescript
import { Enumify } from '@nixjs23n6/ts-enumify'

const EnumKey = Enumify.generate(['ENUM1', 'ENUM2', 'ENUM3'] as const) // const EnumKey: Readonly<Enumify.ToObj<"ENUM1" | "ENUM2" | "ENUM3">>
type EnumType = keyof typeof EnumKey // type EnumType = "ENUM1" | "ENUM2" | "ENUM3"
```
npm package: @nixjs23n6/types
Description: Typings for gRPC Web Client.
Author: nghinv
Latest version: 1.0.16

# @nixjs23n6/types

Typings for web.

## Install

Install these dependencies:

`yarn add @nixjs23n6/types`

## Reference & Example

Visit: <https://grpc-client-toolkit.vercel.app/>
npm package: @nixjs23n6/wc-core
Description: A simple, maximally extensible, dependency minimized framework for building modern Ethereum and other dApps.
Author: nghinv
Latest version: 1.0.17

# @nixjs23n6/wc-core

A simple, maximally extensible, dependency minimized framework for building modern Ethereum and other dApps.

## Install

Install these dependencies:

`yarn add @nixjs23n6/wc-core`

## Reference & Example

Visit: <https://wallet-connector.vercel.app/>
npm package: @nixjs23n6/wc-react
Description: A simple, maximally extensible, dependency minimized framework for building modern dApps using React.
Author: nghinv
Latest version: 1.0.17

# @nixjs23n6/wc-react

A simple, maximally extensible, dependency minimized framework for building modern dApps using React.

## Install

Install these dependencies:

`yarn add @nixjs23n6/wc-react`

## Reference & Example

Visit: <https://wallet-connector.vercel.app/>
npm package: @nixjs23n6/wc-types
Description: Typings for Wallet Connector.
Author: nghinv
Latest version: 1.0.4

# @nixjs23n6/wc-types

Typings for Wallet Connector.

## Install

Install these dependencies:

`yarn add @nixjs23n6/wc-types`

## Reference & Example

Visit: <https://wallet-connector.vercel.app/>
npm package: @nixjs23n6/web-storage
Description: A minimalistic Typescript plugin for web storage
Author: nghinv
Latest version: 0.0.4

# @nixjs23n6/web-storage

A minimalistic Typescript plugin for web storage

## Install

`yarn add @nixjs23n6/web-storage`

## Usage

### New instance

```typescript
import { LocalStorage, SessionStorage, WebStorage } from '@nixjs23n6/web-storage'

const localStorage = new LocalStorage();
// const sessionStorage = new SessionStorage();

localStorage.setItem("ACCESS_TOKEN_KEY", "ACCESS_TOKEN")
localStorage.getItem<string>("ACCESS_TOKEN_KEY")
```

### Extend

```typescript
import { LocalStorage } from '@nixjs23n6/web-storage'

class LocalStore extends LocalStorage {

  authorize (token: string): this {
    return this.setItem('ACCESS_TOKEN', token);
  }

  deAuthorize (): this {
    return this.removeItem('ACCESS_TOKEN');
  }

}

const store =  new LocalStore();
```

### Static class

```typescript
import { LocalStorageStatic } from '@nixjs23n6/web-storage'

LocalStorageStatic.setItem("ACCESS_TOKEN_KEY", "ACCESS_TOKEN")
LocalStorageStatic.getItem<string>("ACCESS_TOKEN_KEY")
```