open-index/open-npm huggingface dataset:
npm package: @justemit/q-cli
Description: > [English](./README_EN.md)
Author: justemit
Latest version: 0.0.1

# q-cli

> [English](./README_EN.md)

### 使用 **远程模板项目** 生成本地项目

## 使用方法

进入本项目根目录，执行 `npm link`，即可全局安装本脚手架。

在命令行输入 `q-cli -h` 即可查看所有的命令说明。

## 生成项目

`q-cli` 支持下载 **子目录（或子文件）**，使用方法：

```shell
q-cli init <projectName> [subdir]
```

当选择的模板项目中包含所输入的子目录（或子文件）时，`q-cli` 将仅使用 `子目录中的文件（或子文件）`。如果模板项目中不包含所指定的子目录（或子文件），将使用整个项目模板。

> 注意指定使用模板中的某个子文件，需要保持 porjectName 格式与该子文件格式 一致，例如：`q-cli init app.js server.js`

## 添加模板

命令行键入 `q-cli config --all`，即可查看所有配置。请参照 `q-cli config templates` 的结构加入模板。

例如，假设 `q-cli` 的配置文件中暂无任何模板，同时我想添加 github 上的模板，过程如下：

```shell
q-cli config templates [] # config.tempaltes = []
q-cli config templates.0 {} # config.templates[0] = {}
q-cli config templates.0.rootURL justemit # config.templates[0].rootURL = "justemit"
q-cli config templates.0.templates [] # config.templates[0].templates = []
q-cli config templates.0.templates.0 vue-ssr-boilerplate # config.templates[0].templates[0] = "vue-ssr-boilerplate"
```

执行 `q-cli list`，命令行输出应为：

```shell
  1. justemit/vue-ssr-boilerplate
```

## 注意

如果使用私有 gitlab 的模板项目必须设置 `clone: true`，同时下载地址的形式应为：

```shell
git.yourdomain.com:group/projectname
```

例如：

```json
{
  "rootURL": "your-gitlab-domain.com:your-gitlab-group",
  "templates": ["repo"],
  "options": {
    "clone": true
  }
}
```
npm package: @justestif/openswarm
Description: Multi-agent task orchestration CLI — swarm messaging, tasks, panes, and worktrees
Latest version: 0.1.1

# openswarm

Multi-agent task orchestration CLI.

## Install

```bash
npm install -g @justestif/openswarm
```

This downloads the pre-built binary for your platform from [GitHub Releases](https://github.com/justEstif/openswarm/releases).

**Requires:** Node.js ≥ 18, git (for `swarm worktree`)

## Usage

```bash
swarm init                    # initialise .swarm/ in your project
swarm task add "My task"      # create a task
swarm agent register alice    # register an agent
swarm msg send alice -s hi -b "hello"
swarm status                  # snapshot of current state
```

Full docs: https://github.com/justEstif/openswarm
npm package: @justfixnyc/component-library
Description: JustFix Component Library
Latest version: 0.60.2

# JustFix Component Library

Component library for JustFix's design system.

Based this repo on this [course](https://www.newline.co/courses/newline-guide-to-building-a-company-component-library) ([local copy of course mateirals in our drive](https://drive.google.com/file/d/1Q1aYhktm0aacn-GIlC7fxOCrzoIoSZos/view?usp=share_link))

## Local development setup

1. install npm locally if it doesn't already exist `brew install npm`
2. `npx sb init`

- builder error: select Webpack 5
- dependency resolution errors: `npm install --legacy-peer-deps`

3. `npm run storybook`
4. if there are [OSSL issues](https://stackoverflow.com/questions/75167770/error-error0308010cdigital-envelope-routinesunsupported-node-js-v19-4-0), run `export NODE_OPTIONS=--openssl-legacy-provider`

## Publishing the package

This package is live on both GitHub Package Registry (GPR) and NPM registry

GitHub Actions triggers a publish to GPR from any branch that runs the version bump. Should probably change to allow this version bump to only happen on `main` before we fully integrate this library

``` shell
npm run lint
npm version [major]|[minor]|[patch]
git push --follow-tags
```

Publishing to NPM registry is more manual because of permission issues that couldn't be resolved in Github Actions. You will need to authenticate your account (w/ permissions to the JustFix organization) via the terminal. 

```shell
npm run build
npm publish --access public --@justfixnyc:registry=https://registry.npmjs.org/
```
npm package: @justfixnyc/contentful-common-strings
Description: This module provides tooling for retrieving and displaying common rich-text content shared by JustFix.nyc projects.
Latest version: 0.1.4-alpha.0

This module provides tooling for retrieving and displaying common rich-text content
shared by JustFix.nyc projects.

Each common string has an alphanumeric id and a value. The value is a localizable
rich text value. For example, the original motiviation for this package is the common
string with id `covidMoratoriumBanner`, which has a value containing the rich text
to show users about the current state of the COVID Moratorium, localized in both
English and Spanish.

This package contains tooling to retrieve all entries from a pre-configured Contentful space that have been given a particular [tag](https://www.contentful.com/help/tags/). Each of these entries is expected to have a short text field called `id` and a localized rich text field called `value`.

These entries can be retrieved in one of two ways:

1. A command-line program called `contentful-common-strings`. This can be useful for static sites that want to have the entries rendered at build time.

2. Via the [`fetchContentfulCommonStrings`](src/fetch-common-strings.ts) function, which can be run from node or the browser.

Functionality provided by the [`ContentfulCommonStrings`](src/index.ts) class makes it convenient to retrieve a common string's rich text document representation by its id. The front-end can then render them using a package like [`@contentful/rich-text-react-renderer`](https://www.npmjs.com/package/@contentful/rich-text-react-renderer).

For an example of this package in use, see the [manual test][] code.

To use the manual test, you can run `yarn watch` and then visit http://localhost:8080/.

[manual test]: test-manual/contentful-common-strings-manual-test.tsx
npm package: @justfixnyc/geosearch-requester
Description: This package provides the base functionality for building autocomplete interfaces powered by the [NYC Planning Labs GeoSearch API][geosearch].
Latest version: 1.0.3-alpha.0

This package provides the base functionality for building autocomplete
interfaces powered by the [NYC Planning Labs GeoSearch API][geosearch].

For an example of this package in use, see the [manual test][] code.

If you don't have a transpiler or module bundler, a CommonJS version
of this package can be found under `commonjs`.

[geosearch]: https://geosearch.planninglabs.nyc/
[manual test]: test-manual/geosearch-manual-test.ts
npm package: @justfixnyc/react-common
Description: This module provides common React components for use by JustFix.nyc projects.
Latest version: 0.0.15-alpha.0

This module provides common React components for use by JustFix.nyc projects.

For an example of this package in use, see the [manual test][] code.

[manual test]: test-manual/react-common-manual-test.tsx
npm package: @justfn/css-scope-loader
Description: less scope loader
Author: fsl
Latest version: 1.0.1

# 对css文件增加命名空间

## 原理: 
使用 属性选择器 增加命名空间效果 

## 配置 
css-loader 前添加 @justfn/css-scope-loader, 进行预处理 
```js
// ...
{
  test: /\.less$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        // modules: true, 
      },
    },
    {
      loader: '@justfn/css-scope-loader',
    },
    {
      loader: 'less-loader',
    },
  ],
},
```

## 启用 
.css / .less 文件中, 首行增加以下注释 

```css
/* scope: xxx; */ 

```

所有选择器将增加 属性 [data-fd-scope="xxx"] ,以达到明明空间的效果 


## 其他说明 

### ^ 单独跳过命名空间的标识 
```css 
^ div {
  color: red; 
}
```
npm package: @justfn/fekits
Description: frontend kits
Author: justfn
Latest version: 0.0.3

## 前端工具集 



#### 持续集成中... 

#### 新增 
```
touch distance 
虚拟滚动 
元素可见性 
渲染DOM到canvas中  html2canvas 插件
将DOM保存为图片
```

#### 优化 
```
Scroll 
```
npm package: @justfn/vmconsole
Description: vue mobile console
Author: fntst
Latest version: 1.0.0


 
<h1><img src="./doc/logo.png" >VMConsole</h1>
<h1>Vue Mobile Console: Vue项目移动端调试工具</h1>


安装: 
<pre>
$ npm i -D vmconsole
</pre>

使用: 
<pre>
// import Vue from 'vue';  // 依赖项目中的Vue  
// import router from './router/index.js';  // 依赖项目中的路由 
// import store from './store/index.js';  // 依赖项目中的状态管理 
import VMConsole from "vmconsole/src/index.js";  // 引入 VMConsole  
// 初始化 VMConsole 
VMConsole(Vue,router,store); // Vue 必填;  router、store可选  
</pre>


或者按需引入 (如非生产环境引入) 
<pre>
if ( process.env.NODE_ENV!=='production' ) {
   require("vmconsole/src/index.js").default(Vue,router,store); 
 }
</pre>

<pre> 注意: 仅支持Vue2.0以下, 依赖于webpack的打包, 请不要将该包排除在打包范围外; </pre>


<img src="./doc/console.jpg" > 
<img src="./doc/element.jpg" > 
<img src="./doc/element1.jpg" > 
<img src="./doc/network.jpg" > 
<img src="./doc/routes.jpg" > 
<img src="./doc/storage.jpg" >
npm package: @justforfun-ui/theme-chalk
Description: loading ...
Author: mingdu
Latest version: 1.0.2

## justforfun-theme-chalk
> justforfun component chalk theme.

### Installation
``` bash
npm i justforfun-ui
```
### Usage
Use Sass import
``` bash
@use 'justforfun-ui/lib/theme-chalk/index.scss';
```
Or Use vite/webpack
``` js
import 'justforfun-ui/lib/theme-chalk/index.css'
```
Or
``` css
<link
  rel="stylesheet"
  href="https://unpkg.com/justforfun-ui/lib/theme-chalk/index.css"
/>
```
### Import on demand
``` js
import 'element-plus/lib/theme-chalk/input.css'
import 'element-plus/lib/theme-chalk/select.css'

// ...
```
npm package: @justgage/reason-cookie
Description: a simple way to use cross-browser cookies that contain JSON.
Author: Gage Peterson
Latest version: 0.1.2

![Reason Cookie Logo](https://raw.githubusercontent.com/justgage/reason-cookie/master/logo.png)

#  🍪 ReasonCookie

a simple way to use cross-browser cookies that contain JSON.

Note this wrapps [js-cookie](https://github.com/js-cookie/js-cookie)

# Is it ready for prime time?

These are just some simple bindings to the library it wraps. I've used it on some side projects but it should be _reasonably_ good. The Underlying library is pretty battle tested and can even work in older browsers.

# Install

```
npm install --save @justgage/reason-cookie
```

Then in your `bsconfig.json`.

```
  "bs-dependencies": ["@justgage/reason-cookie"],
```

# API 😋

### Working with string values

```reason
open JustgageReasonCookie;

Cookie.getAsString("hello") /* None */
Cookie.setString("hello", "test");
Cookie.getAsString("hello") /* Some("test") */
```

### working with JSON

```reason
open JustgageReasonCookie;

let obj = Js.Dict.empty();
Js.Dict.set(obj, "a", Js.Json.number(2.));
let obj = Js.Json.object_(obj);

Cookie.setJson("hello", obj);

let maybeCookie = Cookie.getAsJson("hello");
```

### set path/expiry

* **expires**: number of days till it's gone.
* **path**: this scopes it to a page on your website (note: haven't used this personally)

(see [js-cookie](https://github.com/js-cookie/js-cookie) for more uses)

```reason
open JustgageReasonCookie;

Cookie.setJsonConfig(
  "hello",
  obj,
  Cookie.makeConfig(~path="", ~expires=2, ()),
);
```

# Contribute?

Best thing somone can do is just use it and find any problems it has.

Absolutely! Just make an issue. Please note that I usually ask people to make the changes themselves.
npm package: @justglanceit/capacitor-plugin-external-link-account
Description: Implement External Link Account entitlement requirements
Author: Patryk Bojczuk
Latest version: 1.0.0-0

# External Link Account Capacitor plugin

Implement External Link Account requirements

## Install

```bash
npm install @justglanceit/capacitor-plugin-external-link-account
npx cap sync
```

## API

<docgen-index>

* [`canOpen()`](#canopen)
* [`open()`](#open)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### canOpen()

```typescript
canOpen() => Promise<{ value: boolean; }>
```

Resolves with `value` === `true` if app can open interstitial modal sheet before linking out, `false` otherwise.

**Returns:** <code>Promise&lt;{ value: boolean; }&gt;</code>

--------------------


### open()

```typescript
open() => Promise<void>
```

Opens interstitial modal sheet before linking out if available,
throws exception if cannot link outside or modal is not available.

Modal is available for `iOS 16.0` or greater.

--------------------

</docgen-api>
npm package: @justhookit/use-axios
Description: React Hook to fetch data using Axios with built-in loading, error, and refetch support.
Author: Kyle Boo
Latest version: 1.0.0

# @justhookit/use-axios
React Hook to fetch data using Axios with built-in loading, error, and refetch support.

## Installation

#### npm
`npm i @justhookit/use-axios`

#### yarn
`yarn add @justhookit/use-axios`

## Usage
```js
import React from "react";
import useAxios from "@justhookit/use-axios.js";

function App() {
  const { loading, data, refetch } = useAxios({
    url: "https://yts.mx/api/v2/list_movies.json",
  });
	
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
}
```

## Arguments
| Argument      | Type     | Description                                              | Required |
|---------------|----------|----------------------------------------------------------|----------|
| opts          | Object   | Axios request config object (must include url)           | yes      |
| axiosInstance | Function | Optional custom Axios instance to use instead of default | no       |

## Returns
| Return  | Type     | Description                                       |
|---------|----------|---------------------------------------------------|
| loading | Boolean  | Indicates if the request is currently loading     |
| data    | any      | Response data from the Axios request              |
| error   | Error    | Any error thrown during the request               |
| refetch | Function | Function to manually re-trigger the Axios request |
npm package: @justhookit/use-before-leave
Description: React Hook to execute a function when mouse leaves the top edge of the window
Author: Kyle Boo
Latest version: 1.0.0

# @justhookit/use-before-leave
React Hook to execute a function when mouse leaves the top edge of the window

## Installation

#### npm
`npm i @justhookit/use-before-leave`

#### yarn
`yarn add @justhookit/use-before-leave`

## Usage
```js
import React from "react";
import useBeforeLeave from "@justhookit/use-before-leave";

function App() {
	const onLeave = () => {
		console.log("Please don't leave...");
	};

	useBeforeLeave(onLeave);

	return (
		<div className="App">
			<h1>Hello World</h1>
		</div>
	);
}
```

## Arguments
| Argument | Type     | Description            								 | Required |
|----------|----------|------------------------------------------------------|----------|
| onBefore | Function | Function to call when mouse leaves top of the window | yes      |
npm package: @justhookit/use-click
Description: React Hook to detect a click on any React element.
Author: Kyle Boo
Latest version: 1.0.0

# @justhookit/use-click
React Hook to detect a click on any React element.

## Installation

#### npm
`npm i @justhookit/use-click`

#### yarn
`yarn add @justhookit/use-click`

## Usage
```js
import React from "react";
import useClick from "@justhookit/use-click";

function App() {
  const onClick = () => {
    console.log("Hello!");
  };
  
  const title = useClick(onClick);

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

## Arguments
| Argument | Type     | Description                       | Required |
|----------|----------|-----------------------------------|----------|
| onClick  | Function | Function to call on element click | yes      |

## Returns
| Return  | Type             | Description                                       |
|---------|------------------|---------------------------------------------------|
| element | MutableRefObject | Ref to be attached to the clickable React element |
npm package: @justhookit/use-confirm
Description: React Hook to ask the user for confirmation before executing a function.
Author: Kyle Boo
Latest version: 1.0.0

# @justhookit/use-confirm
React Hook to ask the user for confirmation before executing a function.

## Installation

#### npm
`npm i @justhookit/use-confirm`

#### yarn
`yarn add @justhookit/use-confirm`

## Usage
```js
import React from "react";
import useConfirm from "@justhookit/use-confirm";

function App() {
	const execute = () => {
		console.log("Deleting Item...");
	};
	
	const abort = () => {
		console.log("aborted");
	}

	const confirmExecution = useConfirm("Are you sure?", execute, abort);
	
	return (
		<div className="App">
			<button onClick={confirmExecution}>Execute the function</button>
		</div>
	);
}
```

## Arguments
| Argument  | Type     | Description            					       | Required |
|-----------|----------|------------------------------------------------|----------|
| mesage    | String   | The message to show in the confirmation dialog | yes      |
| onConfirm | Function | Function to execute if user confirm            | yes      |
| onCancel  | Function | Function to execute if user cancels            | yes      |

## Returns
| Return 		| Type     | Description                                  |
|---------------|----------|----------------------------------------------|
| confirmAction | Function | Function to trigger the confirmation process |
npm package: @justhookit/use-fade-in
Description: React Hook to apply a fade-in effect to any React element.
Author: Kyle Boo
Latest version: 1.0.0

# @justhookit/use-fade-in
React Hook to apply a fade-in effect to any React element.

## Installation

#### npm
`npm i @justhookit/use-fade-in`

#### yarn
`yarn add @justhookit/use-fade-in`

## Usage
```js
import React from "react";
import useFadeIn from "@justhookit/use-fade-in";

function App() {
	const fadeInH1 = useFadeIn(1, 2);
	const fadeInP = useFadeIn(5, 1);

	return (
		<div className="App">
			<h1 {...fadeInH1}>Hello</h1>
			<p {...fadeInP}>lalalala</p>
		</div>
	);
}
```

## Arguments
| Argument | Type   | Description              					     | Required |
|----------|--------|------------------------------------------------|----------|
| duration | Number | Duration of the fade-in animation (in seconds) | no       |
| delay    | Number | Delay before animation starts (in seconds)     | no       |

## Returns
| Return | Type                | Description                           |
|--------|---------------------|---------------------------------------|
| ref    | MutableRefObject    | Ref to attach to the fading element   |
| style  | React.CSSProperties | Initial style with opacity value of 0 |
npm package: @justhookit/use-full-screen
Description: React Hook to activate/deactivate full screen mode on any React element.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-full-screen
React Hook to activate/deactivate full screen mode on any React element.

## Installation

#### npm
`npm i @justhookit/use-full-screen`

#### yarn
`yarn add @justhookit/use-full-screen`

## Usage
```js
import React from "react";
import useFullScreen from "@justhookit/use-full-screen";

function App() {
	const onFullScreen = (isFull) => {
		console.log(isFull ? "Full Screen" : "Small Screen");
	};

	const { element, triggerFull, exitFull } = useFullScreen(onFullScreen);

	return (
		<div className="App" style={{ height: "1000vh" }}>
		<div ref={element}>
			<img src="https://cdn.shopify.com/s/files/1/1426/3142/files/shutterstock_2459930529_480x480.jpg?v=1724300172" />
			<button onClick={triggerFull}>Make Full Screen</button>
			<button onClick={exitFull}>Exit Full Screen</button>
		</div>
		</div>
	);
}
```

## Arguments
| Argument     | Type     | Description              			                   | Required |
|--------------|----------|--------------------------------------------------------|----------|
| callback     | Function | Called with true on enter and false on exit fullscreen | yes      |

## Returns
| Return      | Type    		  | Description                                              |
|-------------|------------------|----------------------------------------------------------|
| element     | MutableRefObject | Ref to attach to the element to fullscreen               |
| triggerFull | Function         | Call to enter fullscreen                                 |
| exitFull    | Function         | Call to exit fullscreen					                |
npm package: @justhookit/use-hover
Description: React Hook to detect a hover on any React element.
Author: Kyle Boo
Latest version: 1.0.0

# @justhookit/use-hover
React Hook to detect a hover on any React element.

## Installation

#### npm
`npm i @justhookit/use-hover`

#### yarn
`yarn add @justhookit/use-hover`

## Usage
```js
import React from "react";
import useHover from "@justhookit/use-hover";

function App() {
  const onHover = () => {
    console.log("Hello!");
  };
  
  const title = useHover(onHover);

  return (
    <div className="App">
      <h1 ref={title}> Hello World</h1>
    </div>
  );
}
```

## Arguments
| Argument | Type     | Description                    | Required |
|----------|----------|--------------------------------|----------|
| onHover  | Function | Function to run on mouse enter | yes      |

## Returns
| Return  | Type             | Description                                       |
|---------|------------------|---------------------------------------------------|
| element | MutableRefObject | Ref to be attached to the hoverable React element |
npm package: @justhookit/use-input
Description: React Hook to manage controlled form input with optional validation.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-input
React Hook to manage controlled form input with optional validation.

## Installation

#### npm
`npm i @justhookit/use-input`

#### yarn
`yarn add @justhookit/use-input`

## Usage
```js
import React from "react";
import useInput from "@justhookit/use-input";

function App() {
  const initialVal = "Mickey";
  const validator = (value) => !value.includes('@');
  const name = useInput(initialVal, validator);

  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
}
```

## Arguments
| Argument     | Type     | Description                 | Required |
|--------------|----------|-----------------------------|----------|
| initialValue | String   | Initial value of the input  | yes      |
| validator    | Function | Optional validator function | yes      |

## Returns
| Return   | Type     | Description                               |
|----------|----------|-------------------------------------------|
| value    | String   | Current value of the input                |
| onChange | Function | Function to validate and update the input |
npm package: @justhookit/use-network
Description: React Hook to detect whether the user is online or offline.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-network
React Hook to detect whether the user is online or offline.

## Installation

#### npm
`npm i @justhookit/use-network`

#### yarn
`yarn add @justhookit/use-network`

## Usage
```js
import React from "react";
import useNetwork from "@justhookit/use-network";

function App() {
	const handleNetworkChange = (online) => {
		console.log(online ? "Online" : "Offline");
	};

	const onLine = useNetwork(handleNetworkChange);

	return (
		<div className="App">
			<h1>{onLine ? "Online" : "Offline"}</h1>
		</div>
	);
}
```

## Arguments
| Argument | Type     | Description              							 | Required |
|----------|----------|------------------------------------------------------|----------|
| onChange | Function | Optional callback triggered on network status change | no       |

## Returns
| Return | Type    | Description                      |
|--------|---------|----------------------------------|
| status | Boolean | true if online, false if offline |
npm package: @justhookit/use-notification
Description: React Hook to enable web browser notifications.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-notification
React Hook to enable web browser notifications.

## Installation

#### npm
`npm i @justhookit/use-notification`

#### yarn
`yarn add @justhookit/use-notification`

## Usage
```js
import React from "react";
import useNotification from "@justhookit/use-notification";

function App() {
	const triggerNotif = useNotification("Here is your notification!", {
		body: "Here is the content!",
	});

	return (
		<div className="App" style={{ height: "1000vh" }}>
			<button onClick={triggerNotif}>Notify!</button>
		</div>
	);
}
```

## Arguments
| Argument | Type   | Description              					| Required |
|----------|--------|-------------------------------------------|----------|
| title    | String | Notification of title 					| yes      |
| options  | Object | Optional configuration (body, icon, etc.) | no       |

## Returns
| Return    | Type     | Description                          |
|-----------|----------|--------------------------------------|
| fireNotif | Function | Function to trigger the notification |

## Notes
***ONLY works when the notificaiton setting is turned on***
npm package: @justhookit/use-prevent-leave
Description: React Hook to warn the user before accidentally leaving the page.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-prevent-leave
React Hook to warn the user before accidentally leaving the page.

## Installation

#### npm
`npm i @justhookit/use-prevent-leave`

#### yarn
`yarn add @justhookit/use-prevent-leave`

## Usage
```js
import React from "react";
import usePreventLeave from "@justhookit/use-prevent-leave";

function App() {
	const { enablePrevent, disablePrevent } = usePreventLeave();

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

## Returns
| Return         | Type     | Description                      |
|----------------|----------|----------------------------------|
| enablePrevent  | Function | Enables the confirmation dialog  |
| disablePrevent | Function | Disables the confirmation dialog |
npm package: @justhookit/use-scroll
Description: React Hook to track the current (X,Y) coordiantes of scroll position.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-scroll
React Hook to track the current (X,Y) coordiantes of scroll position.

## Installation

#### npm
`npm i @justhookit/use-scroll`

#### yarn
`yarn add @justhookit/use-scroll`

## Usage
```js
import React from "react";
import useScroll from "@justhookit/use-scroll";

function App() {
	const { x, y } = useScroll();

	return (
		<div className="App" style={{ height: "1000vh" }}>
			<h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>
				Hello World
			</h1>
		</div>
	);
}
```

## Returns
| Return | Type    | Description                         |
|--------|---------|-------------------------------------|
| x      | number  | Horizontal scroll position (pixels) |
| y      | number  | Vertical scroll position (pixels)   |
npm package: @justhookit/use-tabs
Description: React Hook to naviagte between different tabs.
Author: Kyle Boo
Latest version: 1.0.1

# @justhookit/use-tabs
React Hook to naviagte between different tabs.

## Installation

#### npm
`npm i @justhookit/use-tabs`

#### yarn
`yarn add @justhookit/use-tabs`

## Usage
```js
import React from "react";
import useTabs from "@justhookit/use-tabs";  

// example content
const content = [
  {
    tab: "Section 1",
    content: "I'm the content of Section 1",
  },
  {
    tab: "Section 2",
    content: "I'm the content of Section 2",
  },
];

function App() {
  const { currentItem, changeItem } = useTabs(0, content);

  return (
    <div className="App">
      <h1>Hello</h1>
      {content.map((section, idx) => (
        <button onClick={() => changeItem(idx)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
}
```

## Arguments
| Argument   | Type    | Description                     | Required |
|------------|---------|---------------------------------|----------|
| initialTab | Number  | Index of initially selected tab | yes      |
| allTabs    | Array   | Array of tab data               | yes      |

## Returns
| Return      | Type     | Description                                 |
|-------------|----------|---------------------------------------------|
| currentItem | any      | Currently selected tab content              |
| changeItem  | Function | Function to change the current tab by index |
npm package: @justhookit/use-title
Description: React Hook to update your document's title
Author: Kyle Boo
Latest version: 1.0.5

# @justhookit/use-title
React Hook to dynamically update the browser title.

## Installation

#### npm
`npm i @justhookit/use-title`

#### yarn
`yarn add @justhookit/use-title`

## Usage
```js
import React from "react";
import useTitle from "@justhookit/use-title";

function App() {
  useTitle("new title name goes here");

  return (
    <h1>Hello World</h1>
  );
}
```

## Arguments
| Argument     | Type   | Description                | Required |
|--------------|--------|----------------------------|----------|
| initialTitle | String | The initial document title | yes      |

## Returns
| Argument | Type      | Description                           |
|----------|-----------|---------------------------------------|
| setTitle | Function  | Function to update the document title |
npm package: @justia/eslint-config-typescript
Description: Justia's ESLint configuration for TypeScript projects
Author: Diego Miguel
Latest version: 2.0.9
Deprecated: Package got renamed. Please now use @justia/eslint-config-ts

<!-- UPDATE-PACKAGES:START - Do not remove or modify this section -->

# `@justia/eslint-config-typescript` ![version 2.0.9](https://img.shields.io/badge/version-2.0.9-blue?style=flat-square) <!-- omit from toc -->

> Justia's ESLint configuration for TypeScript projects

<!-- UPDATE-PACKAGES:END -->

This package uses [`@justia/eslint-config`](https://github.com/justia/front-end-projects/tree/develop/packages/eslint-config) as a base configuration and modifies **import** and **prettier** rules to support TypeScript.

## Install

Install the correct versions of the peer dependencies, which are listed by the command:

```shell
npm info "@justia/eslint-config-typescript@latest" peerDependencies
```

If using **npm 5+**, use this shortcut

```shell
npx install-peerdeps --dev @justia/eslint-config-typescript
```

If using npm < 5, Linux/OSX users can run

```shell
(
export PKG=@justia/eslint-config-typescript;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
```

Which produces and runs a command like:

```shell
npm install --save-dev @justia/eslint-config-typescript eslint@^#.#.# prettier@^#.#.# eslint-config-prettier@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-prettier@^#.#.# eslint-plugin-promise@^#.#.# @typescript-eslint/parser@^#.#.# @typescript-eslint/eslint-plugin@^#.#.#
```

## Usage

This configuration contains all of our ESLint rules, including ECMAScript 6+, TypeScript and formatting styles. It requires the following external packages:

- `eslint`
- `prettier`
- `eslint-config-prettier`
- `eslint-plugin-import`
- `eslint-plugin-prettier`
- `eslint-plugin-promise`
- `@typescript-eslint/parser`
- `@typescript-eslint/eslint-plugin`

After installation of packages and its peer dependencies, add the following configuration to your ESLint configuration file:

```json
{
    "extends": ["@justia/eslint-config-typescript"],
    "parserOptions": {
        "project": "./tsconfig.json"
    }
}
```

Alter your `eslint` command to include `ts` files:

```shell
eslint --ext .js,.ts ./
```

### VS Code Issue

For those how use VS Code, it is possible you are getting the following error message:

> Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
> The file does not match your project config: .eslintrc.js.
> The file must be included in at least one of the projects provided.

To fix it you will need to add a ESLint-specific TypeScript configuration file (`tsconfig.eslint.json`):

```json
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "noEmit": true
    },
    "include": [
        ".eslintrc.js",
        // Also re-add the patterns you define in the original `include` key.
    ]
}
```

Then change the `parserOptions.project` to `tsconfig.eslint.json`.