open-index/open-npm huggingface dataset:
npm package: @sooho/parser
Description: A Solidity parser forked from federicobond/solidity-parser-antlr
Author: Jisu Park
Latest version: 0.3.4

@sooho/parser
=====================

This project is hardly forked from the federicobond's awesome project([solidity-parser-antlr/](https://github.com/federicobond/solidity-parser-antlr/))

A Solidity parser built on top of a robust [ANTLR4 grammar](https://github.com/solidityj/solidity-antlr4).

### Usage

```javascript
import parser from 'solidity-parser-antlr';

var input = `
    contract test {
        uint256 a;
        function f() {}
    }
`
try {
    parser.parse(input)
} catch (e) {
    if (e instanceof parser.ParserError) {
        console.log(e.errors)
    }
}
```

The `parse` method also accepts a second argument which lets you specify the
following options, in a style similar to the _esprima_ API:

| Key      | Type    | Default | Description                                                                                                                                                                                 |
|----------|---------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| tolerant | Boolean | false   | When set to `true` it will collect syntax errors and place them in a list under the key `errors` inside the root node of the returned AST. Otherwise, it will raise a `parser.ParserError`. |
| loc      | Boolean | false   | When set to `true`, it will add location information to each node, with start and stop keys that contain the corresponding line and column numbers.                                         |
| range    | Boolean | false   | When set to `true`, it will add range information to each node, which consists of a two-element array with start and stop character indexes in the input.                                   |


#### Example with location information

```javascript
parser.parse('contract test { uint a; }', { loc: true })

// { type: 'SourceUnit',
//   children:
//    [ { type: 'ContractDefinition',
//        name: 'test',
//        baseContracts: [],
//        subNodes: [Array],
//        kind: 'contract',
//        loc: [Object] } ],
//   loc: { start: { line: 1, column: 0 }, end: { line: 1, column: 24 } } }

```

#### Example using a visitor to walk over the AST

```javascript
var ast = parser.parse('contract test { uint a; }')

// output the path of each import found
parser.visit(ast, {
  ImportDirective: function(node) {
    console.log(node.path)
  }
})
```

### Author

Jisu Park ([@jisupark](https://github.com/jisupark))

And thanks to Federico Bond ([@federicobond](https://github.com/federicobond)) for the previous projects

### License

MIT
npm package: @soohoio/claude-harness-init
Description: Scaffold Claude harness files into the current working directory
Latest version: 0.1.1

# @soohoio/claude-harness-init

Scaffold Claude harness files into the current working directory.

## Usage

```bash
npx @soohoio/claude-harness-init
```

## What it creates

- `CLAUDE.md`
- `.harness/acceptance.template.md`
- `.harness/context-policy.md`
- `.harness/handoff.template.md`
- `.harness/plan.template.md`
- `.harness/state.json`
- `.harness/state.schema.md`
- `.harness/tasks.template.json`
npm package: @sook/use-before-leave
Description: React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-before-leave

React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.

## Installation

#### yarn

`yarn add @sook/use-before-leave`

#### npm

`npm i @sook/use-before-leave`

## Usage

```js
import React from "react";
import useBeforeLeave from "@sook/use-before-leave";

function App() {
  const beforeLeave = () => console.log("User is leaving...");
  useBeforeLeave(beforeLeave);
  return <h1>Hello sook</h1>;
}
```

### Arguments

| Argument      | Type     | Description                                              | Required |
| ------------- | -------- | -------------------------------------------------------- | -------- |
| onBeforeLeave | function | Function to be called when the mouse leaves the document | yes      |
npm package: @sook/use-confirm
Description: React Hook to ask the user for a confirmation before executing a function.
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-confirm

React Hook to ask the user for a confirmation before executing a function.

## Installation

#### yarn

`yarn add @sook/use-confirm`

#### npm

`npm i @sook/use-confirm`

## Usage

```js
import React from "react";
import useConfirm from "@sook/use-confirm";

function App() {
  const deleteWorld = () => console.log("Deleting world...");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld);
  return <button onClick={confirmDelete}>Delete the world</button>;
}
```

### Arguments

| Argument  | Type     | Description                                         | Required |
| --------- | -------- | --------------------------------------------------- | -------- |
| message   | string   | Message to show the user on the confirmation propmt | yes      |
| onConfirm | function | Function to be executed when the user confirms      | yes      |
| onCancel  | function | Function to be executed when the user cancels       | no       |

### Return

| Return value | Type     | Description                                    | Default value |
| ------------ | -------- | ---------------------------------------------- | ------------- |
| function     | function | Function wrapped around the confirmation logic | null          |
npm package: @sook/use-fade-in
Description: React Hook to fade in any element.
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-fade-in

React Hook to fade in any element.

## Installation

#### yarn

`yarn add @sook/use-fade-in`

#### npm

`npm i @sook/use-fade-in`

## Usage

```js
import React from "react";
import useFadeIn from "@sook/use-fade-in";

function App() {
  const fadeIn = useFadeIn(5, 10);
  return <h1 {...fadeIn}>This will fade in.</h1>;
}
```

### Arguments

| Argument | Type   | Description                                     | Required | Default value |
| -------- | ------ | ----------------------------------------------- | -------- | ------------- |
| duration | number | Sets the duration of the transition. In seconds | no       | 1             |
| delay    | number | Delays of transition's start. In seconds        | no       | 0             |

### Return

`useScroll` returns an object containing the following:

| Name  | Type      | Description                                                               |
| ----- | --------- | ------------------------------------------------------------------------- |
| ref   | React Ref | A ref created to fadeIn the element                                       |
| style | Object    | Style object containing `{opacity:0}` to give to the element as a default |

It's recommended to just spread the returned object on the element as shown in the Usage section above.
npm package: @sook/use-fullscreen
Description: React Hook to make any element go Fullscreen
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-fullscreen

React Hook to make any element go Fullscreen

## Installation

#### yarn

`yarn add @sook/use-fullscreen`

#### npm

`npm i @sook/use-fullscreen`

## Usage

```js
import React from "react";
import useFullscreen from "@sook/use-fullscreen";

function App() {
  const onChange = isFull =>
    console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
}
```

### Arguments

| Argument | Type     | Description                                                       | Arguments        | Required |
| -------- | -------- | ----------------------------------------------------------------- | ---------------- | -------- |
| onChange | function | Function to be called when the screen goes Fullscreen or exits is | isFull : Boolean | no       |

### Return

`useFullscreen` returns an object containing the following:

| Return value | Type      | Description                                                |
| ------------ | --------- | ---------------------------------------------------------- |
| element      | React Ref | Ref to add to the element that you want to make fullscreen |
| triggerFull  | Function  | Function to make the element enter fullscreen              |
| exitFull     | Function  | Function to make the document exit fullscreen              |
npm package: @sook/use-hover
Description: React Hook to detect a hover on an any React Element
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-hover

React Hook to detect a hover on an any React Element

## Installation

#### yarn

`yarn add @sook/use-hover`

#### npm

`npm i @sook/use-hover`

## Usage

```js
import React from "react";
import useHover from "@sook/use-hover";

function App() {
  const onHover = () => console.log("Somebody hovered!");
  const markedRef = useClick(onHover);
  return <h1 ref={markedRef}>Hello sook</h1>;
}
```

### Arguments

| Argument | Type     | Description                                       | Required |
| -------- | -------- | ------------------------------------------------- | -------- |
| onHover  | function | Function to be called when the element is hovered | yes      |

### Return

| Return value | Type      | Description                                                     | Default value |
| ------------ | --------- | --------------------------------------------------------------- | ------------- |
| ref          | React Ref | A React Ref listening to the hover event, add it to any element | null          |
npm package: @sook/use-network
Description: React Hook to listen when the user goes online or offline.
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-network

React Hook to listen when the user goes online or offline.

## Installation

#### yarn

`yarn add @sook/use-network`

#### npm

`npm i @sook/use-network`

## Usage

```js
import React from "react";
import useNetwork from "@sook/use-network";

function App() {
  const onNetworkChange = isOnline =>
    console.log(isOnline ? "We are back online" : "We just got offline");
  const isOnline = useNetwork(onNetworkChange);
  return <h1>{isOnline ? "We are online" : "We are offline"}</h1>;
}
```

### Arguments

| Argument        | Type     | Description                                           | Arguments          | Required |
| --------------- | -------- | ----------------------------------------------------- | ------------------ | -------- |
| onNetworkChange | function | Function to be called when the network status changes | isOnline : Boolean | no       |

### Return

| Return value | Type    | Description                                         | Default value |
| ------------ | ------- | --------------------------------------------------- | ------------- |
| isOnline     | Boolean | A boolean representing if the user is online or not | true          |
npm package: @sook/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-prevent-leave

React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.

## Installation

#### yarn

`yarn add @sook/use-prevent-leave`

#### npm

`npm i @sook/use-prevent-leave`

## Usage

```js
import React from "react";
import usePreventLeave from "@sook/use-prevent-leave";

function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  const saveChanges = async () => {
    enablePrevent();
    await sendToApi();
    disablePrevent();
  };
  return <button onClick={saveChanges}>Save changes</button>;
}
```

### Return

| Return value | Type   | Description                                                                                                                     |
| ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------- |
| Functions    | Object | A object containing functions `enablePrevent` and `disablePrevent`, use this functions to enable/disable the leaving prevention |
npm package: @sook/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll.
Author: sangriaholic
Latest version: 1.1.0

# @sook/use-scroll

React Hook to get X/Y coordinates of current position of the scroll.

## Installation

#### yarn

`yarn add @sook/use-scroll`

#### npm

`npm i @sook/use-scroll`

## Usage

```js
import React from "react";
import useScroll from "@sook/use-scroll";

function App() {
  const { x, y } = useScroll();
  return (
    <h1>
      We are in: {x} / {y}
    </h1>
  );
}
```

### Return

| Return value | Type   | Description                                                             | Default value |
| ------------ | ------ | ----------------------------------------------------------------------- | ------------- |
| Coords       | Object | An object containing the x/y coordinates of the current scroll position | `{x:0, y:0}`  |
npm package: @sook/use-title
Description: React Hook to update your document's title.
Author: sangriaholic
Latest version: 1.1.0

# sook/use-title

React Hook to update your document's title.

## Installation

#### yarn

`yarn add @sook/use-title`

#### npm

`npm i @sook/use-title`

## Usage

```js
import React from "react";
import useTitle from "@sook/use-title";

function App() {
  useTitle("Welcome");
  return <h1>Welcome</h1>;
}
```

### Arguments

| Argument | Type   | Description                                | Required |
| -------- | ------ | ------------------------------------------ | -------- |
| title    | string | The title you want to use on your document | yes      |
npm package: @sookoll/vue-treeselect
Description: Tree select hierarchical component for vue 3 (compat).
Author: Mihkel Oviir
Latest version: 1.0.1

# vue-treeselect

> This is Vue3 compat release of vue3-treeselect  
> A multi-select component with nested options support for Vue 3 compat.  
> Thank to [riophae](https://github.com/riophae/vue-treeselect) and his sources and library for vue 2 taken as basis.


### Credits

This project is inspired by [vue-treeselect](https://github.com/riophae/vue-treeselect).
Special thanks go to their respective authors!

### License

Released under the [MIT License](https://github.com/megafetis/vue3-treeselect/blob/master/LICENSE).

### New features (on top of the original library)

- Added isUnselectable option to prevent selection of certain nodes
- Unselectable options will always toggle the branch (collapse/expand)
- Comptabile with Vue3 compat
- Uses vite as build tool

- TODO: Docs are not up to date.
npm package: @sooloer/pages
Description: A react library developed with dumi
Latest version: 1.0.1

# @sooloer/pages

[![NPM version](https://img.shields.io/npm/v/@sooloer/pages.svg?style=flat)](https://npmjs.org/package/@sooloer/pages) [![NPM downloads](http://img.shields.io/npm/dm/@sooloer/pages.svg?style=flat)](https://npmjs.org/package/@sooloer/pages)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ yarn install

# develop library by docs demo
$ yarn start

# build library source code
$ yarn run build

# build library source code in watch mode
$ yarn run build:watch

# build docs
$ yarn run docs:build

# check your project for potential problems
$ yarn run doctor
```

## LICENSE

MIT
npm package: @sooluh/subfinder
Description: Find, scan and collect subdomains of any domain
Author: Suluh Sulistiawan
Latest version: 1.0.3

# Subdomain Finder

[Subfinder](https://github.com/sooluh/subfinder) is used to find, scan and collect subdomains of any domain

## Install

```
npm i @sooluh/subfinder
```

## Usage

```javascript
const Subfinder = require("@sooluh/subfinder");
const subfinder = new Subfinder();

// callback
subfinder.lookup("domain.com", function (subdomains, error) {
  if (error) return console.error(error);

  console.log(subdomains);
});

// promise with then/catch
subfinder.lookup("domain.com")
  .then(console.log)
  .catch(console.error);

// promise with async/await
(async () => {
  try {
    const subdomains = await subfinder.lookup("domain.com");
    console.log(subdomains);
  } catch (error) {
    console.error(error);
  }
})();
```

## License

Code licensed under [MIT License](./LICENSE).
npm package: @soolv/ai-chat-provider
Description: ```sh npm install @soolv/ai-chat-provider ```
Author: Ingar Almklov
Latest version: 1.0.1

# ai-chat-provider

```sh
npm install @soolv/ai-chat-provider
```

This package is a companion to [Vercel's AI SDK](https://github.com/vercel/ai), specifically `useChat` from `ai/react`.

The use-case for this is when you have multiple components that interact with the same chat.
You can of course structure your components in a way that you only have one `useChat` call and pass props, but this is not always convenient.

`useChat` is designed so that _data_ is shared when `id` and `api` match, but "setup" like `generateId()` and handlers like `onFinish` or `onError` are not.
Also, it might feel awkward to ensure that only one `useChat` invocation specifies `initialMessages`.

## Example

> [!IMPORTANT]
> When using any of the `onX` callbacks, make sure the references are stable (typically with `useCallback`).

The `value` prop for `AiChatProvider` accepts the same arguments as `useChat` except the `onX` handlers.
These should instead be passed as arguments to `useAiChat`.

```tsx
import { AiChatProvider, useAiChat, type UseChatHandlers } from '@soolv/ai-chat-provider';

export function Page() {
  return (
    <AiChatProvider
      value={{
        id: '...',
        api: '...',
        initialMessages: [],
        generateId() {
          return createId();
        }
      }}
    >
      <MessageView />
      <AddMessageButton />
    </AiChatProvider>
  );
}

function MessageView() {
  const { messages } = useAiChat({
    onFinish: useCallback<UseChatHandlers['onFinish']>(
      async (_message, _options) => {
        console.log("MessageView: onFinish!")
      },
      []
    ),
  });

  return (
    <ul>
      { messages.map((m) => <li key={m.id}>{m.content}</li>) }
    </ul>
  );
}

function AddMessageButton() {
  const { append } = useAiChat({
    onFinish: useCallback<UseChatHandlers['onFinish']>(
      async (_message, _options) => {
        console.log("AddMessageButton: onFinish!")
      },
      []
    ),
  })

  return (
    <button
      type="button"
      onClick={() => {
        append({
          role: 'user',
          content: 'This is a user message'
        });
      }}
    >
      Send user message
    </button>
  );
}
```

## Development

Install [bun](https://bun.sh/docs/installation).

```sh
# lint
bun run lint

# build
bun run build

# generate changeset interactively
bun changeset
```

### Releasing

We use [changesets](https://github.com/changesets/changesets).

Make sure to include a changeset with your PR when you make changes.
When PRs are merged, the package will be published automatically.

## License

MIT
npm package: @soon-gis/effect
Description: @soon-gis/effect 是 Cesium 的特效库，包含了很多特效
Author: 郭斌勇
Latest version: 1.0.3

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[Git仓库]: http://soon.xwbuilders.com:9090/library/ceffect/ceffect
[发行地址]: http://soon.xwbuilders.com:9090/library/ceffect/ceffect/releases
[issues]: http://soon.xwbuilders.com:9090/library/ceffect/ceffect/issues




> 目录

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)



# 1. 背景

# 2. 简介
库的简单介绍

**具有以下特性：**  
- 特性1
- 特性2
- 特性3

**详情请看：**  
- 主页：<http://soon.xwbuilders.com:9090/library/ceffect/ceffect>
- [Git仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>





# 3. 安装方式
目前，安装方式有以下几种：


## 3.1. 方式1：通过 npm 安装
通过 npm （或 yarn、pnpm 等包管理器）安装
```
npm install @soon-gis/effect
```




## 3.2. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `effect.iife.js` 作为缀的文件，然后使用如下代码引用 和 使用 effect：


1. 引用 @soon-gis/effect
   ```
   <script src="path/to/package/effect.iife.js"></script>
   ```
   
2. 使用全局的 `Effect`
   ```
   <script>
   // 使用全局的 Effect
   </script>
   ```

# 4. 教程
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]
npm package: @soongsil/streak
Description: Easy Streak
Latest version: 1.0.9

<div align="center">

<h1>@soongsil/streak</h1>

A React Streak UI Component Library, powered by @soongsil/streak Frontend Team.

[![license](https://badgen.net/github/license/Soongsil-Developers/streak)](https://github.com/Soongsil-Developers/streak/blob/main/LICENSE)
[![license](https://badgen.net/npm/v/@soongsil/streak)](https://www.npmjs.com/package/@soongsil/streak)
[![license](https://badgen.net/npm/types/@soongsil/streak)](https://www.npmjs.com/package/@soongsil/streak)

</div>

## Installation

```sh
// with npm
npm install @soongsil/streak

// with yarn
yarn add @soongsil/streak
```

## Usage

### Getting Started

```jsx
import React from 'react';
import { Grass } from '@soongsil/streak';

const Component = () => {
  return <Grass {...props} />;
};
```

### Demo

#### [👀 Sandbox](https://codesandbox.io/s/elated-satoshi-9ex2pl)

### Props

| data | onClickData | options |
| :--: | :---------: | :-----: |
npm package: @sooni-hooks/use-axios
Description: React Hook to use axios easy way
Author: soonitoon
Latest version: 1.0.2

# useAxios
React-Hook to use Axios easy way.

## Notice
**useAxios** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-axios`
2. Add `import useAxios from "@sooni-hooks/use-axios"` in your script.
3. Done!

## How to use
**useAxios** has two parameters.
- **opts**: Config to `axios`
- **axiosInstance**: A request method. If you don't give any argument, default instance is `axios`.

useAxios returns an object containing `state` and `refetch()`.
- **state**: An object containing `loading`, `error`, `data`.
  - **loading**: Default value is `true`. When fetching is completed, It changes to `false`.
  - **error**: The error message.
  - **data**: The data that you want to get.
- **refetch()** A function that retries fetching data from URL.

If you want to get more information about `Axios`, go to this link:
https://www.npmjs.com/package/axios

## Example code
```js
function App() {
  const options = {
    url: "https://jsonplaceholder.typicode.com/todos/1", // example url
  };
  const { loading, error, data, refetch } = useAxios(options);
  return (
    <div className="App">
      <h1>{JSON.stringify(loading)}</h1>
      <p>{JSON.stringify(error)}</p>
      <p>{JSON.stringify(data)}</p>
      <button onClick={refetch}></button>
    </div>
  );
}
```

## Full code
```js
import { useEffect, useState } from "react";
import defaultAxios from "axios";

const useAxios = (opts, axiosInstance = defaultAxios) => {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null,
  });
  const [trigger, setTrigger] = useState(0);
  if (!opts.url) {
    return;
  }
  const refetch = () => {
    setState({
      ...state,
      loading: true,
    });
    setTrigger(Date.now());
  };
  useEffect(() => {
    axiosInstance(opts)
      .then((data) => {
        setState({
          ...state,
          loading: false,
          data,
        });
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [trigger]);
  return { ...state, refetch };
};

export default useAxios;
```
npm package: @sooni-hooks/use-before-leave
Description: React Hook to prevent user from leaving page
Author: soonitoon
Latest version: 1.0.1

# useBeforeLeave
React-Hook that can sence that user will leave the page.

## Notice
**useBeforeLeave** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-before-leave`
2. Add `import useBeforeLeave from "@sooni-hooks/use-before-leave"` in your script.
3. Done!

## How to use
**useBeforeLeave** takes `onLeave` function as argument. It is called when user will leave the current page(when user's mouse pointer get out of the page throuh the top).

## Example
```js
function App() {
  const onLeave = () => console.log("Don't Leave");
  useBeforeLeave(onLeave);
  return <div className="App"></div>;
}
```

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code
```js
import { useEffect } from "react";

const useBeforeLeave = (onLeave) => {
  if (typeof onLeave !== "function") {
    return;
  }
  const handle = (event) => {
    const { clientY } = event;
    if (clientY <= 0) {
      onLeave();
    }
  };

  useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return () => {
      document.removeEventListener("mouseleave", handle);
    };
  }, []);
};

export default useBeforeLeave;
```
npm package: @sooni-hooks/use-click
Description: React Hook to connect Click event and function
Author: soonitoon
Latest version: 1.0.4

# useClick
React-Hook that connects the function to the DOM element.

## Notice
- **useClick** is custom React-Hook; So it works on only **React environment**.
- I know that the function of useClick is same as `onClick` attribute.🙃 It is a functional programming practice!

## Installation
1. `$ npm install @sooni-hooks/use-click`
2. Add `import useClick from "@sooni-hooks/use-click"` in your script.
3. Done!

## How to use
**useClick** takes `handleClick()` as an argument. `handleClick()` is called when user click the element.

`useClick` returns `element` that is reference of the DOM element.

## Example
```js
function App() {
  const handleClick = () => console.log("Clicked");
  const element = useClick(handleClick);
  return (
    <div className="App">
      <h1 ref={element}>Click me</h1>
    </div>
  );
}
```

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code
```js
import { useRef, useEffect } from "react";

const useClick = (handleClick) => {
  if (typeof handleClick !== "function") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", handleClick);
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener("click", handleClick);
      }
    };
  }, []);
  return element;
};

export default useClick;
```
npm package: @sooni-hooks/use-confirm
Description: React Hook to use confirm easy way
Author: soonitoon
Latest version: 1.0.2

# useConfirm
JavaScript function that can sand browser confirm to the user.

## Notice
**useConfirm** is in the repository "React_Hooks", but it is not React Hook!🙃 So it doesn't have any dependency modules.

## Installation
1. `$ npm install @sooni-hooks/use-confirm`
2. Add `import useConfirm from "@sooni-hooks/use-confirm"` in your script.
3. Done!

## How to use
**useConfirm** has three properties.
- `onConfirm` : Callback function that is called when confirm event is happened.
- `onCancel` : Callback function that is called when confirm is rejected by user.
- `message` : The String that you want to show on browser confirm window.

`useConfirm` returns `handleConfirm()`. It contains two functions and message that you gave to `useConfirm` as a property. It makes confirm event and runs event handler automatically when you call it.

## Example
```js
function App() {
  const onConfirm = () => console.log("OK");
  const onCancel = () => console.log("Nope");
  const handleConfirm = useConfrim(onConfirm, onCancel, "Sure?");
  return (
    <div classname="App">
      <button onClick={handleConfirm}>click</button>
    </div>
  );
}
```

## Development environment setting

You need to install **NPM**
- Linux : `$ sudo apt install npm`
- Windows : Go to download link https://nodejs.org/en/download/

## Full code
```js
const useConfirm = (onConfirm, onCancel, message = "Are you sure?") => {
  if (typeof onConfirm !== "function") {
    return;
  }
  if (typeof onCancel !== "function") {
    return;
  }
  const handleConfirm = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };
  return handleConfirm;
};

export default useConfirm;
```
npm package: @sooni-hooks/use-fade-in
Description: React Hook to use fade in easy way
Author: soonitoon
Latest version: 1.0.3

# useFadeIn
React-Hook to use Fade-In effect easy way

## Notice
**useFadeIn** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-fade-in`
2. Add `import useFadeIn from "@sooni-hooks/use-fade-in"` in your script.
3. Done!

## How to use
**useFadeIn** takes two argument; `duration` and `delay`. Each argument is property of CSS transition. The default value is:
- duration = 2
- delay = 0

`useFadeIn` returns a object that consists of attributes of DOM element. You'll use this object in the DOM element with `spead operator`.

## Example
```js
function App() {
  const attributes = useFadeIn(3, 1);
  return (
    <div className="App">
      <h1 {...attributes}>Hello Hook!</h1>
    </div>
  );
}
```

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code
```js
import { useEffect, useRef } from "react";

const useFadeIn = (duration = 2, delay = 0) => {
  if (typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    const { current } = element;
    if (current) {
      current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
      current.style.opacity = 1;
    }
  }, []);
  return { ref: element, style: { opacity: 0 } };
};

export default useFadeIn;
```
npm package: @sooni-hooks/use-fullscreen
Description: React Hook to use fullscreen easy way
Author: soonitoon
Latest version: 1.0.2

# useFullscreen
React-Hook to use Fullscreen easy way

## Notice
**useFullscreen** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-fullscreen`
2. Add `import useFullscreen from "@sooni-hooks/use-fullscreen"` in your script.
3. Done!

## How to use
**useFullscreen** takes `fullscreenCallback` function as an argument. `fullscreenCallback` takes Boolean argument. The example of `fullscreenCallback` is:
```js
const fullscreenCallback = (isFull) => {
  if (isFull){
    console.log("Fullscreen")
  } else {
    console.log("Not Fullscreen")
  }
}
```
You can use this callback function as a Fullscreen handler.

useFullscreen returns an object containing `element`, `onFullscreen`, `offFullscreen`.

- **element**: Reference of DOM element. Put it in  `ref` attribute.
- **onFullscreen**: Function that turns on the fullscreen mode.
- **offFullscreen**: Function that turns off the fullscreen mode.

# Example
```js
function App() {
  const handleFullscreen = (isFull) => {
    if (isFull) {
      console.log("Fullscreen");
    } else {
      console.log("Not Fullscreen");
    }
  };
  const { element, onFullscreen, offFullscreen } = useFullscreen(handleFullscreen);
  return (
    <div className="App">
      <div ref={element}>
        <img src="https://via.placeholder.com/300" />
        <button onClick={onFullscreen}>Full</button>
        <button onClick={offFullscreen}>Exit</button>
      </div>
    </div>
  );
}
```

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

# Full code
```js
import { useRef } from "react";

const useFullscreen = (fullscreenCallback) => {
  const element = useRef();
  const runCallback = (isFull) => {
    if (fullscreenCallback && typeof fullscreenCallback === "function") {
      fullscreenCallback(isFull);
    }
  };
  const onFullscreen = () => {
    if (element.current) {
      if (element.current.requestFullscreen) {
        element.current.requestFullscreen();
      } else if (element.current.mozRequestFullscreen) {
        element.current.mozRequestFullscreen();
      } else if (element.current.webkitRequestFullscreen) {
        element.current.webkitRequestFullscreen();
      } else if (element.current.msRequestFullscreen) {
        element.current.msRequestFullscreen();
      }
    }
    runCallback(true);
  };
  const offFullscreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullscreen) {
      document.mozCancelFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    runCallback(false);
  };

  return { element, onFullscreen, offFullscreen };
};

export default useFullscreen;
```
npm package: @sooni-hooks/use-input
Description: React Hook to use input easy way
Author: soonitoon
Latest version: 1.0.5

# useInput
React-Hook to get user's input value.

## Notice
**useInput** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-input`
2. Add `import useInput from "@sooni-hooks/use-input"` in your script.
3. Done!

## How to use
**useInput** takes two arguments. One is `init value`, the other is `verification function`. `init value` is default value of input. `verification function` checks the input value and returns Boolean value. The example of `verification function` is:
```js
const verify = (value) => {
  if (typeof(value) === "string"){
    return true
  } else {
    return false
  }
}
```

useInput returns a object containing `input value` and `onChange function`.
```js
{
  value: value,
  onChange: onChange
}
```
They have same name as JSX attributes. So you can use this object inside of JSX tag with `spread operator`.

## Example
```js
function App() {
  const verify = (value) => {
    if (typeof value === "string") {
      return true;
    } else {
      return false;
    }
  };
  const attributes = useInput("name", verify);
  return (
    <div className="App">
      <h1>{attributes.value}</h1>
      <input {...attributes}></input>
    </div>
  );
}
```

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code
```js
import { useState } from "react";

const useInput = (init, verification) => {
  const [value, setValue] = useState(init);
  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    let willUpdate = true;
    if (typeof verification === "function") {
      willUpdate = verification(value);
    }
    if (willUpdate) {
      setValue(value);
    }
  };
  return {
    value,
    onChange,
  };
};

export default useInput;
```
npm package: @sooni-hooks/use-network
Description: React Hook to detect user's network state
Author: soonitoon
Latest version: 1.0.1

# useNetwork
React-Hook that can catch user's network status.

## Notice
**useNetwork** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-network`
2. Add `import useNetwork from "@sooni-hooks/use-network"` in your script.
3. Done!

## How to use
**useNetwork** takes `onChange function` as argument. This function takes the Boolean value. And it works according to the Boolean value. Example is:
```js
const onChange = (isOnline) => {
  if (isOnline){
    console.log("Online");
  } else {
    console.log("Offline");
  }
}
```
Also useNetwork returns `isOnline`. This is Boolean value. If user's network is connected, `isOnline`'s value is `true`. If user's network is unconnected, `isOnline`'s value is `false`.

## Example
```js
function App() {
  const onChange = (isOnline) => {
    console.log(isOnline ? "online" : "offline");
  };
  const isOnline = useNetwork(onChange);
  return (
    <div className="App">
      <h1>{JSON.stringify(isOnline)}</h1>
    </div>
  );
}
```

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code
```js
import { useEffect, useState } from "react";

const useNetwork = (onChange) => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const handleChange = () => {
    if (typeof onChange === "function") {
      onChange(navigator.onLine);
    }
    setIsOnline(navigator.onLine);
  };
  useEffect(() => {
    window.addEventListener("online", handleChange);
    window.addEventListener("offline", handleChange);
    return () => {
      window.removeEventListener("online", handleChange);
      window.removeEventListener("offline", handleChange);
    };
  }, []);
  return isOnline;
};

export default useNetwork;
```
npm package: @sooni-hooks/use-notification
Description: React Hook to use browser notification easy way
Author: soonitoon
Latest version: 1.0.1

# useNotification
Javascript Function that sends browser message to the user.

## Notice
**useNotification** is in the repository "React_Hooks", but it is not React Hook!🙃 So it doesn't have any dependency modules.

## Installation
1. `$ npm install @sooni-hooks/use-notification`
2. Add `import useNotification from "@sooni-hooks/use-notification"` in your script.
3. Done!

## How to use
**useNotification** takes two arguments;
1. **title**: Message title.
2. **options**: An object containing custom setting.

The possible options are:

- **lang**: The notification's language, as specified using a DOMString representing a BCP 47 language tag. See the Sitepoint ISO 2 letter language codes page for a simple reference.
- **body**: A DOMString representing the body text of the notification, which is displayed below the title.
- **tag**: A DOMString representing an identifying tag for the notification.
- **icon**: A USVString containing the URL of an icon to be displayed in the notification.
- **image**: a USVString containing the URL of an image to be displayed in the notification.
- **data**: Arbitrary data that you want associated with the notification. This can be of any data type.
- **vibrate**: A vibration pattern for the device's vibration hardware to emit with the notification.
- **silent**: A Boolean specifying whether the notification is silent (no sounds or vibrations issued), regardless of the device settings. The default is false, which means it won't be silent.

`useNotification` returns `sandNotification()`. It sends a notification permission request to the user. It makes browser message if user agrees.

If you want to get more information about `Notification` object, visite **MDN**.

Link: https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification

## Example
```js
function App() {
  const option = {
    body: "Hello!",
  };
  const sandNotification = useNotification("I'm message", option);
  return (
    <div className="App">
      <button onClick={() => sandNotification()}>sand message</button>
    </div>
  );
}
```

## Development environment setting
You need to install **NPM**
- Linux : `$ sudo apt install npm`
- Windows : Go to download link https://nodejs.org/en/download/

## Full code
```js
const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    return;
  }
  const sandNotification = () => {
    if (Notification.permission !== "granted") {
      Notification.requestPermission().then((permission) => {
        if (permission !== "granted") {
          return;
        } else {
          new Notification(title, options);
        }
      });
    } else {
      new Notification(title, options);
    }
  };
  return sandNotification;
};

export default useNotification;
```
npm package: @sooni-hooks/use-prevent-leave
Description: React Hook to prevent user from leaving page
Author: soonitoon
Latest version: 1.0.1

# usePreventLeave
JavaScript Function that prevent user from leaving current page.

## Notice
**usePreventLeave** is in the repository "React_Hooks", but it is not React Hook!🙃 So it doesn't have any dependency modules.

## Installation
1. `$ npm install @sooni-hooks/use-prevent-leave`
2. Add `import usePreventLeave from "@sooni-hooks/use-prevent-leave"` in your script.
3. Done!

## How to use
**usePreventLeave** returns `enablePrevent()` and `disablePrevent()`. You can call `enablePrevent()` when you want to prevent user from leaving current page; and the opposite is possible as well.

## Example
```js
function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={() => enablePrevent()}>enable</button>
      <button onClick={() => disablePrevent()}>disable</button>
    </div>
  );
}
```
In the example code, If user clicks `eable` button, browser alerts user when user closes the tab. The prevention is disabled if user clicks `disable` button.

## Development environment setting
You need to install **NPM**
- Linux : `$ sudo apt install npm`
- Windows : Go to download link https://nodejs.org/en/download/

## Full code
```js
const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => {
    window.addEventListener("beforeunload", listener);
  };
  const disablePrevent = () => {
    window.removeEventListener("beforeunload", listener);
  };
  return { enablePrevent, disablePrevent };
};

export default usePreventLeave;
```
npm package: @sooni-hooks/use-scroll
Description: React Hook to catch user's scroll position
Author: soonitoon
Latest version: 1.0.3

# useScroll
React-Hook that catches user's scroll position easy way.

## Notice
**useScroll** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-scroll`
2. Add `import useScroll from "@sooni-hooks/use-scroll"` in your script.
3. Done!

## How to use
**useScroll** returns user's current scroll position object.
```js
{X: 0, Y: 0}
```
This object can be used to create interactive page.

## Example

```js
function App() {
  const { Y } = useScroll();
  return (
    <div
      className="App"
      style={{
        height: "1000vh",
        width: "1000vw",
      }}
    >
      <h1
        style={{
          color: Y > 1000 ? "red" : "blue",
          position: "fixed",
        }}
      >
        Hello
      </h1>
    </div>
  );
}
```
In this example code, when user's `scrollX` exceeds 1000, color of `h1` is changed to blue.

## Development environment setting

1. First, you need to install **NPM**
   - Linux : `$ sudo apt install npm`
   - Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code
```js
import { useEffect, useState } from "react";

const useScroll = () => {
  const [position, setPosition] = useState({
    X: 0,
    Y: 0,
  });
  const onScroll = () => {
    setPosition({
      X: window.scrollX,
      Y: window.scrollY,
    });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);
  return position;
};

export default useScroll;
```
npm package: @sooni-hooks/use-tabs
Description: React Hook to change tab easy way
Author: soonitoon
Latest version: 1.0.4

# useTabs
React-hook to change tab easy way.

## Notice
**useTabs** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-tabs`
2. Add `import useTabs from "@sooni-hooks/use-tabs"` in your script.
3. Done!

## How to use
**useTabs** takes two arguments. One is `default tab index`, the other is `tab content array`. This is example of "tab content array":
```js
const tabContentArray = [
  {
    title: "First tab",
    content: "Hello! I'm first tab",
  },
  {
    title: "Second tab",
    content: "Hello! I'm second tab",
  },
];
```
useTabs checks whether the `tab content array` is valid. If it is not, the Hook is terminated.

useTabs returns object that contains `currentContent` and `changeTab()`. `changeTab()` takes **tab index** as argument. 

## Example

```js
function App() {
  const tabContentArray = [
    {
      title: "First tab",
      content: "Hello! I'm first tab",
    },
    {
      title: "Second tab",
      content: "Hello! I'm second tab",
    },
  ];
  const { currentContent, changeTab } = useTabs(0, tabContentArray);
  const { title, content } = currentContent;
  return (
    <div className="App">
      <h1>{title}</h1>
      <p>{content}</p>
      <button onClick={() => changeTab(1)}>next</button>
    </div>
  );
}
```
In the example code, if user clicks `button`, tab index is changed 0 to 1. Then the `title` and `content` are automatically changed.

## Development environment setting

1. First, you need to install **NPM**
   Linux : `$ sudo apt install npm`
   Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code

```js
import { useState } from "react";

const useTabs = (init, array) => {
  if (!array || !Array.isArray(array)) {
    return;
  }
  const [currentTab, setCurrentTab] = useState(init);
  const changeTab = (value) => {
    setCurrentTab(value);
  };
  return {
    currentContent: array[currentTab],
    changeTab,
  };
};

export default useTabs;
```
npm package: @sooni-hooks/use-title
Description: React Hook to change page title easy way
Author: soonitoon
Latest version: 1.0.1

# useTitle
React-hook to change HTML title easy way.

## Notice
**useTitle** is custom React-Hook; So it works on only **React environment**.

## Installation
1. `$ npm install @sooni-hooks/use-title`
2. Add `import useTitle from "@sooni-hooks/use-title"` in your script.
3. Done!

## How to use
**useTitle** returns `setTitle()`. setTitle takes HTML title as argument. If you put a HTML title in the function, the HTML title is automatically changed!

## Example

```js
function App() {
    const setTitle = useTitle("defaultTitle");
    return (
        <div className="App">
        	<h1 onClick={()=>setTitle("changedTitle")}></h1>
        </div>
    );
}
```
In the example code, if user clicks `h1`, HTML title will be changed "defaultTitle" to "changedTitle".

## Development environment setting

1. First, you need to install **NPM**
   Linux : `$ sudo apt install npm`
   Windows : Go to download link https://nodejs.org/en/download/

2. Install **react** and **react-dom**
   `$ npm i react react-dom`

## Full code

```js
import { useEffect, useState } from "react";

const useTitle = (init) => {
  const [title, setTitle] = useState(init);
  const updateTitle = () => {
    const HTML_title = document.querySelector("title");
    HTML_title.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

export default useTitle;

```