open-index/open-npm huggingface dataset:
npm package: @liandro-wesley/use-media-query
Description: A package for you to use in your projects with React JS or Next JS. Basically, it provides a boolean return for the set breakpoints
Author: liandro-wesley
Latest version: 1.1.2

# UseMediaQuery

> A package for you to use in your projects with React JS or Next JS. Basically, it provides a boolean return for the set breakpoints

[![NPM](https://img.shields.io/npm/v/@liandro-wesley/use-media-query.svg)](https://www.npmjs.com/package/@liandro-wesley/use-media-query) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
# NPM
npm install --save @liandro-wesley/use-media-query

# YARN
yarn add @liandro-wesley/use-media-query
```

## Usage

```tsx
import React from 'react'

import useMediaQuery from 'use-media-query'

const Example: React.FC = () => {
  const isMobile = useMediaQuery('(max-width: 425px)')
  return (
    <div>
      You are on: {isMobile ? 'Mobile' : 'Desktop'}
      <span>If this was helpful to you, could you please give this repository a star?</span>
    </div>
  )
}
```


## Follow me

[My Blog](https://liandrowesley.dev)

## License

MIT © [liandro-wesley](https://github.com/liandro-wesley)

---
npm package: @lianetoolkit/form
Description: Embed Liane Forms
Author: Miguel Peixe
Latest version: 0.1.4

# Liane Forms

Embed Liane Forms

---

## Installation

```
$ npm install --save @lianetoolkit/form
```

## Usage

Edit and insert the following `<div />` where you'd like the form to be displayed:

```html
<div
  class="liane-form"
  data-url="https://my-liane-server.com"
  data-campaignId="{my-campaign-id}"
></div>
```

### Compact mode

```html
<div
  class="liane-form"
  data-url="https://my-liane-server.com"
  data-campaignId="{my-campaign-id}"
  data-compact="true"
></div>
```

Place the script once inside `<head>` or right before the `</body>` closing tag:

```html
<script src="liane-form.js"></script>
```

## Build

```
$ git clone https://github.com/liane-toolkit/liane-form.git
$ cd liane-form
$ npm run build
```

The final script will be located at `lib/liane-form.js`.
npm package: @liang-camilo-alvarez/demo-package
Description: sample package: El gran libro de node.js
Author: Liang Camilo Alvarez Tierradentro
Latest version: 1.1.0

#Sample package to learn how to publish packages in npm

Prueba para el libro "El gran libro de Node.js"


##Installation

``` bash

    npm install @liang-camilo-alvarez/demo-package
```

##Usage
```
    import { sum, multiply } from @liang-camilo-alvarez/demo-package

    console.log(sum(1,2))
    //3 

    console.log(multiply(1,2))
    //2
```
npm package: @liang2uv/file-viewer-vue3
Description: vue3-仿微信的文件/图片预览组件，支持图片、txt、pdf、word、excel、ppt预览
Author: liang2uv
Latest version: 1.0.9

# 文件预览

## 说明

vue3-仿微信的文件/图片预览组件，支持图片、txt、pdf、word、excel、ppt预览

## 安装

```bash
npm i @liang2uv/file-viewer-vue3 -S

# 或
pnpm i @liang2uv/file-viewer-vue3 -S
```

## 使用

```vue
<template> 
  <LbFileViewer
    :visible="filePreviewShow"
    :initial-index="filePreviewIndex"
    @close="onClose"
    :fileList="filePreviewList"
  />
</template>
```

```vue
<script lang="ts" setup>
  import { LbFileViewer } from '@liang2uv/file-viewer-vue3'
  // 建议全局(main.ts)引入样式
  import '@liang2uv/file-viewer-vue3/dist/style.css'

  interface FileInfo {
    /**
     * 文件URL
     */
    url: string
    /**
     * 文件名
     */
    name: string
  }

  const filePreviewShow = ref(false)
  const filePreviewIndex = ref(0)
  const filePreviewList = ref<FileInfo[]>([{
    url: 'https://xxx.pdf',
    name: '测试.pdf'
  }])

  function onClose() {
    filePreviewShow.value = false
  }
</script>
```

## 属性（Props）

| 属性名         | 类型           | 说明                         | 默认值    |
| -------------- | -------------- | ---------------------------- | --------- |
| visible        | boolean        | 是否显示预览框               | false     |
| fileList       | FileInfo[]     | 文件信息列表                 | []        |
| initialIndex   | number         | 初始显示文件的索引           | 0         |
| teleport       | boolean        | 是否使用 teleport            | true      |

**FileInfo 类型说明：**

| 字段  | 类型   | 说明     |
| ----- | ------ | -------- |
| url   | string | 文件URL  |
| name  | string | 文件名   |

---

## 方法（通过 `defineExpose` 暴露）

| 方法名        | 说明               | 参数         |
| ------------- | ------------------ | ------------ |
| handleClose   | 关闭预览框         | 无           |
| prevFile      | 切换到上一个文件   | 无           |
| nextFile      | 切换到下一个文件   | 无           |

---

## 事件（Emits）

| 事件名 | 说明         | 回调参数 |
| ------ | ------------ | -------- |
| close  | 关闭预览框时 | 无       |
npm package: @liang2uv/right-menu-vue3
Description: 自定义全局右键菜单、内含右键复制粘贴全选
Author: liang2uv
Latest version: 1.0.2

# 全局右键菜单

## 说明

自定义全局右键菜单、内含右键复制粘贴全选

## 功能

1. 鼠标移动到文字，右键自动选中文字，弹出复制按钮
2. 在输入框右键，弹出粘贴、全选

## 安装

```bash
npm i @liang2uv/right-menu-vue3 -S

# 或
pnpm i @liang2uv/right-menu-vue3 -S
```

## 使用（App.vue）

```vue
<template> 
  <LbRightMenu>
    <!-- 默认插槽，可放一些自定义按钮 -->
  </LbRightMenu>
</template>
```

```vue
<script lang="ts" setup>
  // 建议在App.vue中全局引入
  import { LbRightMenu } from '@liang2uv/right-menu-vue3'
  import '@liang2uv/right-menu-vue3/dist/style.css'
</script>
```

## 插槽（Slots）

| 字段  | 参数   | 说明     |
| ----- | ------ | -------- |
| default   | - | 默认插槽  |

---
npm package: @liang610/less-plugin-variables-export
Description: Adds output of all (not only top-level) variables to a JSON file(s)
Author: Craig Michael Thompson
Latest version: 1.0.1

# less-plugin-variables-export
Adds output of all (not only top-level) variables to a JSON file

## Install plugin
```
npm install --save-dev less-plugin-variables-export
```

## Command line usage (lessc)
```
lessc --variables-export <input.less> <output.css>
```

Variables will be stored in the `<input.json>` file.

```
lessc --variables-export=./node_modules/semantic-ui-less/definitions:./node_modules/semantic-ui-less/themes/default <input.less> <output.css>
```

It should simplify the output when using Semantic UI library.

## Programmatic usage
```js
const less = require('less');
const VariablesExport = require('less-plugin-variables-export');

less.render(<css>, {
	plugins: [
		new VariablesExport({
			paths: './node_modules/semantic-ui-less/definitions'
		})
	]
});
```

## Testing
```
npm test
```
npm package: @liang610/zh-hant-utils
Description: Unicode BMP及SIP繁中筆畫比對函式
Author: Yi-Liang Lai
Latest version: 0.9.0

# zh-hant-utils

Unicode BMP及SIP繁中筆畫比對函式

### `strokeCompare(a:String, b:String):int`

筆畫排序用函式

### `strokeEncode(s:String):String`

將筆畫資訊編入字串中

### `pinyinCompare(a:String, b:String):int`

拼音排序用函式

### `pinyinEncode(s:String):String`

將拼音資訊編入字串中
npm package: @liangchengj/website-icon
Description: Introduce the following script into the website to set the site logo for all my personal websites:
Author: Liangcheng Juves
Latest version: 1.0.1

# @liangchengj/website-icon

Introduce the following script into the website to set the site logo for all my personal websites:

```html
<script src=""></script>
```
npm package: @liangchun/envconf
Description: An interactive command line interface for setting up and syncing env files based on a template
Latest version: 1.1.1

# envconf

An interactive command line interface for setting up and syncing env files based on a template

## Usage
```sh
# set up or sync env files from `envconf.toml`
# (by default it will look it up on the cwd)
envconf

# help
envconf --help
```

## Configuration

Create a `envconf.toml` file with the following format:

```toml
[files]

[files.example1]
template = "./test/example1/.env.sample"
output = "./test/example1/.env"
allow-empty = ["IGNORED_ENV"]
force-prompt-on-create = ["FORCED_PROMPT_WITH_DEFAULT_VALUE"]

[files.example2]
template = "./test/example2/.env.local.sample"
output = "./test/example2/.env.local"
```

### Fields
- `template`: the template file which the env file should be generated from
- `output`: the output env file which will be generated
- `allow-empty`
  - Ignores the envs on creation and copies it as-is with the value set to an empty string
  - If the output file already exists and does not contain the variables specified in `allow-empty`, it will prompt to fill in as blank
- `force-prompt-on-create`: forces a prompt on create for the given env variables even though they have default values

## Behaviours
### On creation of the env file
- Prompts for all env variables which do not have default value in the template
- Env variables which are inside `allow-empty` will be automatically copied with the value set to empty

### On sync (existing env file)
- Prompts for all missing env variables from the template file which are not in the output file
- If there is a default value for an env variable which is not set, pressing ENTER when prompted will fill in the default value
- If an env variable is inside `allow-empty` and is not set, it will prompt to add it as empty to the output file
npm package: @liangchun/rollup-plugin-auto-external
Description: Rollup plugin to automatically exclude package.json dependencies and peerDependencies from your bundle
Author: Steven Benisek
Latest version: 3.0.0-alpha.1

# @liangchun/rollup-plugin-auto-external

[![Build Status](https://travis-ci.org/stevenbenisek/rollup-plugin-auto-external.svg?branch=master)](https://travis-ci.org/stevenbenisek/rollup-plugin-auto-external)

> [Rollup](https://rollupjs.org/) plugin to automatically exclude package.json dependencies and peerDependencies from your bundle.

## Install

```bash
npm install --save-dev rollup-plugin-auto-external
```

## Usage

##### Example `rollup.config.js`

```js
import autoExternal from 'rollup-plugin-auto-external';

export default {
  input: 'index.js',
  plugins: [autoExternal()],
};
```

##### Example `rollup.config.js` with options

```js
import path from 'path';
import autoExternal from 'rollup-plugin-auto-external';

export default {
  input: 'index.js',
  plugins: [
    autoExternal({
      builtins: false,
      dependencies: true,
      packagePath: path.resolve('./packages/module/package.json'),
      peerDependencies: false,
    }),
  ],
};
```

##### Example `rollup.config.js` with [external](https://github.com/rollup/rollup/wiki/JavaScript-API#external)

`rollup-plugin-auto-external` does not overwrite the [external](https://github.com/rollup/rollup/wiki/JavaScript-API#external) option. The two can happily coexist.

```js
import autoExternal from 'rollup-plugin-auto-external';

export default {
  input: 'index.js',
  external: id => id.includes('babel-runtime'),
  plugins: [autoExternal()],
};
```

##### Example `rollup.config.js` with per format options

```js
import autoExternal from 'rollup-plugin-auto-external';

export default ['es', 'umd'].map(format => ({
  input: 'index.js',
  plugins: [
    autoExternal({
      dependencies: format === 'es',
    }),
  ],
}));
```

### Options

#### `builtins`

`boolean`|`string`: defaults to `true`. Add all Node.js builtin modules (in the running version) as externals. Specify a `string` value (e.g., `'6.0.0'`) to add all builtin modules for a _specific version_ of Node.js.

Rollup will complain if `builtins` is present, and the build target is a browser. You may want [rollup-plugin-node-builtins](https://npm.im/package/rollup-plugin-node-builtins).

#### `dependencies`

`boolean`: defaults to `true`.

#### `packagePath`

`string`: defaults to `process.cwd()`. Path to a package.json file or its directory.

#### `peerDependencies`

`boolean`: defaults to `true`.