open-index/open-npm huggingface dataset:
npm package: @kwai-explore/stylelint-config
Description: [![NPM license](https://img.shields.io/npm/l/@kwai-explore/stylelint-config.svg)](https://www.npmjs.com/package/@kwai-explore/stylelint-config) [![NPM version](https://img.shields.io/npm/v/@kwai-explore/stylelint-config.svg)](https://www.npmjs.com/package
Author: ZHAO Jin-Xiang
Latest version: 0.2.3

# @kwai-explore/stylelint-config

[![NPM license](https://img.shields.io/npm/l/@kwai-explore/stylelint-config.svg)](https://www.npmjs.com/package/@kwai-explore/stylelint-config)
[![NPM version](https://img.shields.io/npm/v/@kwai-explore/stylelint-config.svg)](https://www.npmjs.com/package/@kwai-explore/stylelint-config)
[![NPM downloads](https://img.shields.io/npm/dw/@kwai-explore/stylelint-config.svg)](http://www.npmtrends.com/@kwai-explore/stylelint-config)
[![NPM downloads](https://img.shields.io/npm/dm/@kwai-explore/stylelint-config.svg)](http://www.npmtrends.com/@kwai-explore/stylelint-config)

## 💿 Installation

```shell
pnpm install --save-dev stylelint @kwai-explore/stylelint-config
# or
npx install-peerdeps --pnpm --dev @kwai-explore/stylelint-config
```

## 📖 Usage

Set your `.stylelintrc.mjs` to:

```js
export default {
    overrides: [
        {
            files: ['**/*.(css)'],
            extends: ['@kwai-explore/stylelint-config/scss'],
        },
        {
            files: ['**/*.(scss)'],
            customSyntax: 'postcss-scss',
            extends: ['@kwai-explore/stylelint-config/scss'],
        },
        {
            files: ['**/*.(html|vue)'],
            customSyntax: 'postcss-html',
            extends: ['@kwai-explore/stylelint-config/vue'],
        },
    ],
    rules: {},
};
```

## 💻 Third party tool integrations

### lintstaged

add this line to your lintstaged config

```js
{
    // ↓ Add stylelint for css.
    "**/*.{css,scss,vue}": ["stylelint --cache --fix --allow-empty-input"]
}
```

### Visual Studio Code integration

Use the [stylelint.vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension that [Stylelint] provides officially.

You have to configure the `stylelint.validate` option of the extension to check `.vue` files, because the extension does not check the `*.vue` file by default.

Example **.vscode/settings.json**:

```jsonc
{
  "stylelint.validate": [
      ...,
      // ↓ Add "vue" language.
      "vue"
  ]
```

### npm script

```json
{
    "scripts": {
        "lint:css": "stylelint './**/*.{vue,css,scss}'"
    }
}
```

## 🔒 License

See the [LICENSE](LICENSE) file for license rights and limitations (MIT).

[Stylelint]: https://stylelint.io/
npm package: @kwai-video-team/kwai-player-web
Description: <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
Author: kwai-video-team
Latest version: 1.1.19
npm package: @kwai-video-team/las.js
Description: fas.js
Author: gengxing
Latest version: 1.0.6

[![npm](https://img.shields.io/npm/v/@kwai-video-team/las.js.svg?style=flat)](https://npmjs.org/package/@kwai-video-team/las.js)
[![](https://data.jsdelivr.com/v1/package/npm/@kwai-video-team/las.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@kwai-video-team/las.js)
![npm](https://img.shields.io/npm/l/@kwai-video-team/las.js?style=flat)
![npm](https://img.shields.io/bundlephobia/min/@kwai-video-team/las.js?style=flat)


# las.js

las.js是一个JavaScript库，可实现flv直播多码率客户端。它依靠HTML5 video和[MediaSource](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource)扩展进行播放。

las.js是通过将flv传输流转换为fragmented mp4来工作的。支持使用web worker。

las.js直接在标准的[HTML &lt;video&gt;](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)元素上运行。

## 快速入门

docs/GettingStarted.md


## API文档

docs/API.md

## Demo

https://kwaivideoteam.github.io/las.js/demo/index.html

```js
<script src="https://cdn.jsdelivr.net/npm/@kwai-video-team/las.js@latest"></script>
<video id="video"></video>
<script>
    var video = document.getElementById('video');
    if(Las.isSupported()) {
        var las = new Las();
        las.attachMedia(video);
        las.load('http://xxx');
        las.on(Las.Events.MANIFEST_PARSED,function() {
            video.play();
        });
    }
</script>
```

demo/index.html

## 视频控制

视频是通过HTML`<video>`元素控制的。

## 兼容性

las.js需要在支持MSE及fetch的浏览器上运行

浏览器版本要求如下：

- chrome >= 42
- firefox >= 42
- safari >= 10.1
- edge >=14

### Server-side-rendering (SSR)

可以安全地在Node中require此库

## CORS

flv资源必须允许GET请求，且包含[CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)响应头。

## 功能

- 基于http-flv直播多码率自适应
- 基于http-flv直播多码率平滑切换

## License

MIT
npm package: @kwaight/file
Description: File utilities for reading and writing files
Author: Kiefer Waight
Latest version: 0.5.0

# file

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build file` to build the library.

## Running unit tests

Run `nx test file` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @kwaimind/zodfetch
Description: Type-safe fetch wrapper with Zod validation.
Latest version: 0.0.2

# @kwaimind/zodfetch

Type-safe fetch wrapper with Zod validation.

## Install

```shell
npm install @kwaimind/zodfetch zod
```

## Usage

Uses the same `fetch` API but with some zod sugar.

```typescript
import { z } from "zod";
import { zodFetch } from "@kwaimind/zodfetch";

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.email(),
});

// GET request
const user = await zodFetch("https://api.example.com/users/123", userSchema);

// POST request with body
const newUser = await zodFetch("https://api.example.com/users", userSchema, {
  method: "POST",
  body: JSON.stringify({ name: "John", email: "john@example.com" }),
  headers: { "Content-Type": "application/json" }
});

// With custom headers
const user = await zodFetch("https://api.example.com/users/123", userSchema, {
  headers: { Authorization: "Bearer token" }
});
```

## Error handling

```typescript
import { ValidationError } from "zod-fetch";

try {
  await zodFetch("https://api.example.com/users/123", userSchema);
} catch (error) {
  if (error instanceof ValidationError) {
    console.log(error.issues); // Zod validation issues
  }
}
```
npm package: @kwalox/create-node-app
Description: CLI command to bootstrap Node project
Author: Joey Lau
Latest version: 3.0.0

# Create Node App
Create a JavaScript or TypeScript Node application with ease.

## Quick Overview
```sh
mkdir my-app-dir
cd my-app-dir
npx @kwalox/create-node-app my-app
```


## Creating an app
This was build for Node 16.0.0 or later version. I can't garantee that older version will work without configuration.

To create a new app, follow the steps below:

### npx
This command will create files in your current directory.
```sh
npx @kwalox/create-node-app my-app
```
it will generate the initial project structure without installing dependencies. Add `--install` if you want dependacies to be immediately installed.

## What’s Included?

- ES6
- TypeScript
- ESLint
- Babel
- Docker
- Docker-compose
npm package: @kwametech/mcp-server
Description: KwameTech Labs MCP Server — AI SEO/GEO audits, services, and consultations inside Claude Desktop, Cursor, and other AI tools
Author: KwameTech Labs
Latest version: 1.0.0

# KwameTech Labs MCP Server

Access KwameTech Labs AI-powered tools directly from Claude Desktop, Cursor, Windsurf, and other MCP-compatible AI assistants.

## What You Get

**Tools:**
- `geo_audit` — Run a GEO readiness audit on any URL to see how well it performs in AI search engines
- `get_services` — Browse KwameTech Labs service offerings (AI SEO/GEO, AI Agents, Software Dev, and more)
- `get_case_studies` — Read real client case studies with measurable results
- `get_blog_posts` — Search expert content on AI, SEO, GEO, and digital transformation
- `search_knowledge` — Search across all KwameTech Labs content
- `book_consultation` — Book a free 30-minute strategy consultation

**Resources:**
- Company overview and capabilities
- Detailed service descriptions
- Latest blog posts and insights

## Installation

### Claude Desktop

Add to your Claude Desktop config file:

**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`

```json
{
  "mcpServers": {
    "kwametech-labs": {
      "command": "npx",
      "args": ["-y", "@kwametech/mcp-server"]
    }
  }
}
```

### Cursor

Add to `~/.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "kwametech-labs": {
      "command": "npx",
      "args": ["-y", "@kwametech/mcp-server"]
    }
  }
}
```

### Windsurf

Add to your Windsurf MCP configuration:

```json
{
  "mcpServers": {
    "kwametech-labs": {
      "command": "npx",
      "args": ["-y", "@kwametech/mcp-server"]
    }
  }
}
```

## Usage Examples

Once installed, you can ask your AI assistant:

- "Audit example.com for AI search readiness"
- "What services does KwameTech Labs offer?"
- "Show me case studies about AI agents"
- "Search for articles about GEO optimization"
- "Book a consultation with KwameTech Labs"

## Development

```bash
cd mcp-server
npm install
npm run build
npm start
```

Override the API URL for local testing:

```bash
KWAMETECH_API_URL=http://localhost:3002 npm start
```

## About KwameTech Labs

KwameTech Labs builds AI-powered technology solutions including Generative Engine Optimization (GEO), custom AI agents, full-stack software development, and digital transformation services.

Website: https://www.kwametechlabs.com
Free GEO Audit: https://www.kwametechlabs.com/geo-audit
npm package: @kwangdss/bizinfo-mcp
Description: Bizinfo MCP server Node.js client
Latest version: 1.0.10

# Bizinfo HTTP Server

기업마당 지원사업 데이터를 HTTP API로 노출하는 예제 프로젝트입니다. 외부에서는 단순한 REST 인터페이스를 통해 지역/대상/키워드 기반 검색과 자연어 질의를 처리할 수 있습니다.

## 주요 기능

- `GET /search` 엔드포인트로 지역/대상/키워드를 이용한 지원사업 검색
- `POST /search` JSON 본문을 이용한 동일 파라미터 검색
- `POST /search-natural` 자연어 한 문장으로 조건 파싱 후 검색 수행
- `GET /health` 헬스 체크

## 실행 방법

```bash
npm install
npm start
```

기본적으로 `PORT=3000`, `HOST=0.0.0.0`로 동작합니다. 다른 포트나 호스트를 사용하려면 환경 변수를 설정하세요.

```bash
PORT=8080 HOST=127.0.0.1 npm start
```

### 환경 변수

- `BIZINFO_API_KEY` – 기업마당 Open API 키. 설정하지 않으면 패키지에 포함된 데모 키(`QP6yn2`)를 사용합니다.

프로젝트 루트(또는 서버를 실행하는 현재 작업 디렉터리)에 `.env` 파일을 만들어 사용할 수도 있습니다.

```env
BIZINFO_API_KEY=나의_API_키
```

## 예시 요청

```bash
# 1) 쿼리 스트링으로 직접 검색
curl "http://localhost:3000/search?region=광주&target=소상공인&keywords=AI"

# 2) POST /search
curl -X POST "http://localhost:3000/search" \
  -H "Content-Type: application/json" \
  -d '{"region":"서울","target":"청년","page":1,"page_size":5}'

# 3) 자연어 질의
curl -X POST "http://localhost:3000/search-natural" \
  -H "Content-Type: application/json" \
  -d '{"prompt":"부산 소상공인 지원사업 5건만 알려줘"}'
```

모든 응답은 JSON 형식이며 `items` 배열(구조화된 결과)과 `summary` 필드를 포함합니다.

## CLI로 빠르게 결과 확인하기

서버를 띄우지 않고도 기존 CLI 진입점을 통해 자연어 검색이 가능합니다.

```bash
# 설치 없이 실행
npx @kwangdss/bizinfo-mcp "광주 소상공인 사업 알려줘"

# 전역 설치 후 사용
npm install -g @kwangdss/bizinfo-mcp
bizinfo "서울 청년 창업 사업 알려줘"
```

CLI는 내부적으로 같은 로직을 사용해 기업마당 API를 호출합니다. 별도의 서버 없이 바로 결과를 볼 수 있습니다.

## MCP 서버로 사용하기

Model Context Protocol 클라이언트(예: Claude Desktop)의 설정 파일에 아래와 같이 추가하면 됩니다.

```json
{
  "mcpServers": {
    "bizinfo": {
      "command": "npx",
      "args": [
        "-y",
        "@kwangdss/bizinfo-mcp@latest",
        "bizinfo-mcp-server"
      ]
    }
  }
}
```

환경 변수는 MCP 클라이언트가 실행되는 디렉터리 기준의 `.env` 파일 또는 시스템 환경 변수에서 읽어옵니다.

- `BIZINFO_API_KEY` – 기업마당 Open API 키 (선택)

## 클라이언트 스크립트

`npm run client`는 로컬에서 HTTP 서버가 동작 중일 때 검색 요청을 보낼 수 있는 간단한 스크립트입니다.

```bash
npm start &            # 백그라운드로 서버 실행
node client.mjs --region=부산 --target=소상공인 --keywords=AI
```

`--base-url` 옵션 또는 `BIZINFO_HTTP_URL` 환경 변수를 사용해 다른 서버 주소를 지정할 수 있습니다.

## 배포

```bash
npm login
npm publish --access public
```

배포 후에는 HTTP 서버 또는 CLI를 통해 누구나 기업마당 지원사업을 조회할 수 있습니다.

## 라이선스

MIT
npm package: @kwange/vue-sql-editor
Description: vue sql editor
Author: jinguang8
Latest version: 1.1.1

# 📦 @kwange/vue-sql-editor

[![License](https://img.shields.io/npm/l/oclif.svg)](https://github.com/oclif/oclif/blob/main/package.json)
<br><br>
![avatar](https://github.com/skayi/vue-sql-editor/blob/main/vue-sql-editor.png?raw=true)

<br />

# 🗒 Description

Vue SQL Editor (based on `Codemirror`)

<br />

# ✨ Features

1. SQL highlight
2. SQL format
3. SQL prompt
4. Custom config

<br />

# 🔨 Installation

```
npm install @kwange/vue-sql-editor
or
yarn add @kwange/vue-sql-editor
```

<br />

# 🏗 Usage

```javascript
import Vue from 'vue'
import SQLEditor from '@kwange/vue-sql-editor'

Vue.use(SQLEditor)

<SQLEditor v-model="sqlstr" :readOnly="false" />
or
<sql-editor v-model="sqlstr" :readOnly="false" />
```

Replace the format button with slot:

```javascript
<SQLEditor v-model="sqlstr" :lineNumbers="false">
  <template slot="format"><span style="color: blue;">Format SQL</span></template>
</SQLEditor>
```

Custom config:

```javascript
showFormat: true | false
formatText: 'Format'
showHint: true | false
readOnly: true | false

mode: 'text/x-mariadb',
indentWithTabs: true | false,
smartIndent: true | false,
lineNumbers: true | false,
matchBrackets: true | false,
cursorHeight: 1,
lineWrapping: true | false,
extraKeys: { Ctrl: 'autocomplete' },
hintOptions: { completeSingle: false },
```

To change editor content example:

```javascript
<template>
  <div id="app">
    <SQLEditor v-if="visible" v-model="sqlstr" />
    <ul>
      <li :key="i" v-for="(str, i) in sqlList" @click="onClick(str)">
        {{ str }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      visible: true,
      sqlList: [
        'SELECT * FROM app_state_record\n        WHERE appName = ?\n        AND platform = ?\n        AND stateType = ?',
        'INSERT INTO sql_statement_info (`appId`, `sqlCode`, `sqlStatement`, `createTime`, `updateTime`, `lastActiveTime`) VALUES (?, ?, ?, ?, ?, ?)',
        `select a.seller_id, a.seller_name, b.user_name, c.state from a, b, c where a.seller_name = b.seller_name and b.user_id = c.user_id and c.user_id = 17 and a.gmt_create BETWEEN DATE_ADD(NOW(), INTERVAL – 600 MINUTE) AND DATE_ADD(NOW(), INTERVAL 600 MINUTE) order by a.gmt_create；`,
      ],
      sqlstr: '',
    }
  },
  methods: {
    onClick(str) {
      this.visible = false
      this.sqlstr = str
      this.$nextTick(() => {
        this.visible = true
      })
    },
  },
}
</script>
```

<br/>
npm package: @kwangkim/contextstore
Description: React states management system with context and hook
Author: kwang Hyun kim
Latest version: 0.0.2

# React ContextStore

based on [create-react-library](https://github.com/DimiMikadze/create-react-library).

## Current bug on Create-react-library(from Create-react-app)

[Moved all dependencies to dev dependencies because we don't need extra dependencies for our library after build, but we want all this features while developing:](https://github.com/facebook/create-react-app/pull/7219/commits/5c15642ddea9f77d28c3d2137e235b2dc15dec62#diff-b4a510397b084f197f379c4e3485cde1) 

Add [] into `overrides` manually on `eslint-config-react-app/index.js`

## Getting Started

Install dependencies

`npm install` or `yarn install`

Start development server

`npm start` or `yarn start`

Runs the demo app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## Library files

All library files are located inside `src/lib`  

## Demo app

Is located inside `src/demo` directory, here you can test your library while developing

## Testing

`npm run test` or `yarn run test`

## Build library

`npm run build` or `yarn run build`

Produces production version of library under the `build` folder.

## Publish library

`npm publish`


#### Usage of other libraries within your library

- Add the library as a peer dependency in package.json (effectively requiring the calling project to provide this dependency)
- Add the library as a dev dependency in package.json (effectively allowing this library to successfully build without complaining about not having this dependency)
- Add the library to the externals config in your webpack.config file(s). By default, only react and react-dom are there, meaning that those are the only two libraries that you can use within your new shared library.
npm package: @kwangkim/rehype-katex
Description: KaTeX transform plugin for rehype
Author: Junyoung Choi
Latest version: 1.11.4

# Rehype Katex

KaTeX transformer plugin for rehype.

It transfroms html content of `element` nodes with `math` and `inlineMath` class with KaTeX.

> If you are trying to process from Markdown source, using `remark-math` and `remark-rehype` is highly recommended.

## Usage

```sh
npm i -S remark remark-math remark-rehype rehype-stringify
npm i -S rehype-katex
```

```js
const remark = require('remark')
const math = require('remark-math')
const remark2rehype = require('remark-rehype')
const katex = require('rehype-katex')
const stringify = require('rehype-stringify')

// Raw String => MDAST => HAST => transformed HAST => HTML
const processor = remark()
  .use(math)
  .use(remark2rehype)
  .use(katex)
  .use(stringify)

// https://en.wikipedia.org/wiki/Lift_(force)#Lift_coefficient
const rawString = `Lift($L$) can be determined by Lift Coeeficient ($C_L$) like the following equation.

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$
`

const result = processor.processSync(rawString).toString()
/* result
<p>
  Lift(<span class="inlineMath"><span class="katex">...</span></span>) can be determined by Lift Coeeficient (<span class="inlineMath"><span class="katex">...</span></span>) like the following equation.
</p>
<div class="math">
  <span class="katex-display"><span class="katex">...</span></span>
</div>
*/
```

Check [remark-math](https://github.com/rokt33r/remark-math) for more information.

## License

MIT © Junyoung Choi
npm package: @kwangkim/remark-html-katex
Description: KaTeX transform plugin for remark-html
Author: Junyoung Choi
Latest version: 1.11.2

# Remark HTML Katex

KaTeX transformer plugin for remark-html.

It transfroms html content of `math` and `inlineMath` nodes with KaTeX.

> `math` and `inlineMath` nodes can be parsed with `remark-math`.

## Usage

```sh
npm i -S remark remark-math remark-html
npm i -S remark-html-katex
```

```js
const remark = require('remark')
const math = require('remark-math')
const katex = require('remark-html-katex')
const html = require('remark-html')

// Raw String => MDAST => transformed MDAST => HTML
const processor = remark()
  .use(math)
  .use(katex)
  .use(html)

// https://en.wikipedia.org/wiki/Lift_(force)#Lift_coefficient
const rawString = `Lift($L$) can be determined by Lift Coeeficient ($C_L$) like the following equation.

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$
`

const result = processor.processSync(rawString).toString()
/* result
<p>
  Lift(<span class="inlineMath"><span class="katex">...</span></span>) can be determined by Lift Coeeficient (<span class="inlineMath"><span class="katex">...</span></span>) like the following equation.
</p>
<div class="math">
  <span class="katex-display"><span class="katex">...</span></span>
</div>
*/
```

Check [remark-math](https://github.com/rokt33r/remark-math) for more information.

## License

MIT © Junyoung Choi
npm package: @kwangkim/remark-jsx-katex
Description: KaTeX transform plugin for mdx
Author: Junyoung Choi
Latest version: 1.11.4

# Remark JSX Katex

KaTeX transformer plugin for remark-mdx.

It transfroms the content of `math` and `inlineMath` nodes into JSX nodes of mdx with KaTeX.

> `math` and `inlineMath` nodes can be parsed with `remark-math`.

## Usage

```sh
npm i -S remark remark-math remark-jsx-katex
```

```js
const remark = require('remark')
const math = require('remark-math')
const katex = require('remark-html-katex')
const html = require('remark-html')

// Raw String => MDAST => transformed MDAST => HTML
const processor = remark()
  .use(math)
  .use(katex)
  .use(html)

// https://en.wikipedia.org/wiki/Lift_(force)#Lift_coefficient
const rawString = `Lift($L$) can be determined by Lift Coeeficient ($C_L$) like the following equation.

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$
`

const result = processor.processSync(rawString).toString()
/* result
<p>
  Lift(<span class="inlineMath"><span class="katex">...</span></span>) can be determined by Lift Coeeficient (<span class="inlineMath"><span class="katex">...</span></span>) like the following equation.
</p>
<div class="math">
  <span class="katex-display"><span class="katex">...</span></span>
</div>
*/
```

Check [remark-math](https://github.com/rokt33r/remark-math) for more information.

## License

MIT © Junyoung Choi
npm package: @kwangmin-hooks/use-long-press
Description: 단순 클릭/터치와 길게 클릭/터치한 경우를 구분지어 동작 시키는 핸들러를 반환하는 커스텀 훅스
Author: leekwangmin
Latest version: 1.0.0

# useLongPress

- 짧게 클릭/터치와 길게 클릭/터치 하는 경우를 구분지어 동작할 수 있도록 하는 커스텀 훅스

## 사용법

- Params
  - onLongPress: (event: any) => void : 길게 클릭/터치 하였을 때 동작할 핸들러 함수
  - onClick: (event: any) => void : 짧게 클릭/터치 하였을 때 동작할 핸들러 함수
  - { shouldPreventDefault = true, delay = 300 } = {} : 추가 옵션을 위한 객체
    - shouldPreventDefault: 터치에 대한 기본동작을 막을 것인가를 정한다.
    - delay: 얼마나 오랫동안 클릭/터치해야 onLongPress를 동작하도록 할 것인지를 정한다.

## 사용 예시 코드

```
import useLongPress from 'my-package-source';

export function Record({ checkupList }: IRecord) {
    ...

  const onLongPress = (e: any) => {
    // Write some logic when use long press(click/touch)
  };

  const onClick = (e: any) => {
    // Write some logic when use short press(click/touch)
  };

  const defaultOptions = {
    shouldPreventDefault: false,
    delay: 500,
  };

  const longPressEvent = useLongPress(onLongPress, onClick, defaultOptions);

  return(
    ...
    <div {...longPressEvent}>Click!</div>
    ...
  )
}
```

### 참고

- [useLongPress.ts](https://stackoverflow.com/questions/48048957/react-long-press-event)