open-index/open-npm huggingface dataset:
npm package: @jsnix/addon-fit
Description: An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables fitting the terminal's dimensions to a containing element. This addon requires xterm.js v4+.
Author: The xterm.js authors
Latest version: 0.10.1

## @jsnix/addon-fit

An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables fitting the terminal's dimensions to a containing element. This addon requires xterm.js v4+.

### Install

```bash
npm install --save @jsnix/addon-fit
```

### Usage

```ts
import { Terminal } from "@jsnix/xterm";
import { FitAddon } from "@jsnix/addon-fit";

const terminal = new Terminal();
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(containerElement);
fitAddon.fit();
```

See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-fit/typings/addon-fit.d.ts) for more advanced usage.
npm package: @jsnix/addon-unicode-graphemes
Description: ⚠️ **This addon is currently experimental and may introduce unexpected and non-standard behavior**
Author: The xterm.js authors
Latest version: 0.3.2

## @xterm/addon-unicode-graphemes

⚠️ **This addon is currently experimental and may introduce unexpected and non-standard behavior**

An addon providing enhanced Unicode support (include grapheme clustering) for xterm.js.

The file `src/UnicodeProperties.ts` is generated and depends on the Unicode version. See [the unicode-properties project](https://github.com/PerBothner/unicode-properties) for credits and re-generation instructions.

### Install

This addon is not yet published to npm

### Usage

```ts
import { Terminal } from "@jsnix/xterm";
import { UnicodeGraphemesAddon } from "@jsnix/addon-unicode-graphemes";

const terminal = new Terminal();
const unicodeGraphemesAddon = new UnicodeGraphemesAddon();
terminal.loadAddon(unicodeGraphemesAddon);
```
npm package: @jsnooks/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: Song Jae Seok
Latest version: 1.0.1

# useBeforeLeave
- 마우스가 위로 올라가서 페이지를 벗어날 때 `onBefore` 실행

[실습예제]
```js
import React, { useEffect } from "react";

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

  useEffect(() => {
    document.addEventListener("mouseleave", handle);

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

const App = () => {
  const begForLife = () => console.log("Please don't leave");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
};

export default App;
```
npm package: @jsnooks/use-confirm
Description: React Hook to prompt a confirmation before executing a function
Author: Song Jae Seok
Latest version: 1.0.1

# useConfirm

- 확인 버튼을 누를 시 `onConfirm`, 취소 버튼을 누를 시 `onCancel`을 반환하는 함수형 프로그램

[실습예제]
```js
import React from "react";

const useConfirm = (message = "", onConfirm, onCancel) => {
  if (!onConfirm && typeof onConfirm !== "function") {
    return;
  }
  if (!onCancel && typeof onCancel !== "function") {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };

  return confirmAction;
};

const App = () => {
  const deleteWorld = () => console.log("Deleting the world...");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld, abort);
  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the World</button>
    </div>
  );
};

export default App;
```
npm package: @jsnooks/use-fullscreen
Description: React Hook to make any element go Fullscreen
Author: Song Jae Seok
Latest version: 1.0.0

# useFullScreen

- 전체화면을 만들어 주는 hook

[실습예제]

```js
import React, { useRef } from 'react';

const useFullScreen = (callback) => {
  const element = useRef();

  const runCb = (isFull) => {
    if (callback && typeof callback === 'function') {
      callback(isFull);
    }
  };

  const triggerFull = () => {
    if (element.current) {
      element.current.requestFullscreen();
      runCb(true);
    }
  };
  const exitFull = () => {
    const checkFullScreen = document.fullscreenElement;
    if (checkFullScreen !== null) {
      document.exitFullscreen();
      runCb(false);
    }
  };
  return { element, triggerFull, exitFull };
};
const App = () => {
  const callback = (isFull) => {
    console.log(isFull ? 'We are full' : 'We are small');
  };
  const { element, triggerFull, exitFull } = useFullScreen(callback);
  return (
    <div
      className='App'
      style={{ height: '1000vh' }}
    >
      <div ref={element}>
        <img
          src='https://i.ibb.co/R6RwNxx/grape.jpg'
          alt='grape'
          width='250'
        />
        <button onClick={exitFull}>Exit fullscreen</button>
      </div>
      <button onClick={triggerFull}>Make fullscreen</button>
    </div>
  );
};

export default App;
```
npm package: @jsnooks/use-hover
Description: React Hook to detect a hover on an any React Element
Author: Song Jae Seok
Latest version: 1.0.1

# useHover

[실습예제]

```js
import React, { useRef, useEffect } from 'react';

export const useHover = (onHover) => {
  if (typeof onHover !== 'function') {
    return;
  }
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener('mouseenter', onHover);
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener('mouseenter', onHover);
      }
    };
  }, []);
  return element;
};

const App = () => {
  const sayHello = () => console.log('say hello');
  const title = useHover(sayHello);

  return (
    <div className='App'>
      <h1 ref={title}>Hi</h1>
    </div>
  );
};

export default App;
```
npm package: @jsnooks/use-network
Description: React Hook to listen when the user goes online or offline.
Author: Song Jae Seok
Latest version: 1.0.1

# useNetwork

- `navigator`가 online/offline 되는 것을 막아주는 hook

[실습예제]

```js
import React, { useEffect, useState } from 'react';

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

const App = () => {
  const handleNetworkChange = (online) => {
    console.log(online ? 'We just went online' : 'We are offline');
  };
  const onLine = useNetwork(handleNetworkChange);
  return (
    <div className='App'>
      <h1>{onLine ? 'Online' : 'Offline'}</h1>
    </div>
  );
};

export default App;
```
npm package: @jsnooks/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Author: Song Jae Seok
Latest version: 1.0.0

# usePreventLeave

- protect 버튼 누를 시 윈도우 창을 끄기 전 확인 창이 출력
- unprotect 버튼 누를 시 해당 이벤트 취소

[실습예제]
```js
import React from "react";

const usePreventLeave = () => {
  const listener = (e) => {
    e.preventDefault();
    e.returnValue = "";
  };
  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  const disablePrevent = () =>
    window.removeEventListener("beforeunload", listener);

  return { enablePrevent, disablePrevent };
};
const App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  );
};

export default App;
```
npm package: @jsnooks/use-title
Description: React Hooks to update your document's title
Author: Song Jae Seok
Latest version: 1.0.2

# useTitle

- `html`문서의 제목을 변경해주는 역할을 한다.

**[예제코드]**
```js
import React from "react";
import { useState } from "react";
import { useEffect } from "react";

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

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 5000);
  return <div className="App"></div>;
};

export default App;

```
> 처음 title 세팅을 `"Loading..."`으로 설정해둔 후 `setTimeout()`를 사용하여 5초 후에 `"Home"`으로 바뀌도록 구현한 코드이다.