open-index/open-npm huggingface dataset:
npm package: @livelink/fitster
Description: Fits rich text proportionally to an element with intelligent text wrapping.
Author: Jamie Hill
Latest version: 1.0.2

# Fitster

Fits rich text proportionally to an element with intelligent text wrapping.

## Installation

```shell
yarn add @livelink/fitster
```

## Usage

Fitster leverages JavaScript's native module system ([known as ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)), so can be used with your favourite front-end build tool.

```javascript
import Fitster from '@livelink/fitster';

const fitster = new Fitster(document.querySelector('.my-element'));

fitster.fitTo(400, 300);

console.log(fitster.scale);
```

### Before

![Before Fitster](https://github.com/livelink/fitster/blob/main/examples/before.png?raw=true)

### After

![Before Fitster](https://github.com/livelink/fitster/blob/main/examples/after.png?raw=true)

See [example on CodePen](https://codepen.io/thelucid/pen/ZEedvMq).

## Tests

To run the Jest test suite, just run:

```shell
yarn test
```

The test suite will automatically be run by GitHub actions on a push or pull request.

[![Quality](https://github.com/livelink/fitster/actions/workflows/quality.yml/badge.svg)](https://github.com/livelink/fitster/actions/workflows/quality.yml)

## Releases

Releases are automatically handled by GitHub Actions. Just set the correct semantic version number in `package.json`, commit and push changes, create a tag e.g. `v0.9.8`, push the new tag with `git push --tags`, and the rest will happen automatically.

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/livelink/fitster. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/livelink/fitster/blob/main/CODE_OF_CONDUCT.md).

## License

The library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

## Code of Conduct

Everyone interacting in the Fitster project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/livelink/fitster/blob/main/CODE_OF_CONDUCT.md).
npm package: @livelink/snapster
Description: Allowing you to create snapping smart guides in your application.
Author: Jamie Hill
Latest version: 0.1.3

# Snapster

Allowing you to create snapping smart guides in your application.

## Installation

```shell
yarn add @livelink/snapster
```

## Usage

Snapster leverages JavaScript's native module system ([known as ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)), so can be used with your favourite front-end build tool.

```javascript
import Snapster from '@livelink/snapster';

// Create an instance.
const box = document.querySelector('.box');
const container = document.querySelector('.page');
const snapster = new Snapster({ document, container });

// Populate the grid.
snapster.populate([
  {
    x: 0,
    y: 0,
    width: container.clientWidth,
    height: container.clientHeight,
    type: 'page'
  },
  {
    x: 100,
    y: 200,
    width: 300,
    height: 400,
    type: 'normal'
  }
]);

// Snap and render.
const position = snapster.snap({
  x: box.offsetLeft,
  y: box.offsetTop,
  width: box.clientWidth,
  height: box.clientHeight
});

// Update your box position.
box.style.left = `${position.x}px`;
box.style.top = `${position.y}px`;

// Clear the guide.
snapster.clear();
```

See [example on CodePen](https://codepen.io/thelucid/pen/bGRYGYY).

## Tests

To run the Jest test suite, just run:

```shell
yarn test
```

The test suite will automatically be run by GitHub actions on a push or pull request.

[![Quality](https://github.com/livelink/snapster/actions/workflows/quality.yml/badge.svg)](https://github.com/livelink/snapster/actions/workflows/quality.yml)

## Releases

Releases are automatically handled by GitHub Actions. Just set the correct semantic version number in `package.json`, commit and push changes, create a tag e.g. `v0.9.8`, push the new tag with `git push --tags`, and the rest will happen automatically.

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/livelink/snapster. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/livelink/snapster/blob/main/CODE_OF_CONDUCT.md).

## License

The library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

## Code of Conduct

Everyone interacting in the Snapster project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/livelink/snapster/blob/main/CODE_OF_CONDUCT.md).
npm package: @livelybone/copy
Description: About clipboard copy, Object simple&deep copy
Author: 2631541504@qq.com
Latest version: 2.6.6

# @livelybone/copy
[![NPM Version](http://img.shields.io/npm/v/@livelybone/copy.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/copy)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/copy.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/copy)
![gzip with dependencies: 1.9kb](https://img.shields.io/badge/gzip--with--dependencies-1.9kb-brightgreen.svg "gzip with dependencies: 1.9kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

About clipboard copy, Object simple&deep copy

## repository
https://github.com/livelybone/copy.git

## Demo
https://livelybone.github.io/tool/copy/

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/copy.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/copy
```

## Global name
`Copy`

## Interface
See in [index.d.ts](./index.d.ts)

## Import
```js
import {
  copyDom,
  copyText,
  objectSimpleCopy,
  objectDeepCopy,
  objectDeepMerge,
  isCircularStructure,
} from '@livelybone/copy';
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/copy/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/copy/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/date-generator
Description: A module that generates calendar, which includes years, months, dates, hours, minutes, seconds
Author: 2631541504@qq.com
Latest version: 4.2.1

# @livelybone/date-generator
[![NPM Version](http://img.shields.io/npm/v/@livelybone/date-generator.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/date-generator)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/date-generator.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/date-generator)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A module that generates calendar, which includes years, months, dates, hours, minutes, seconds

## repository
https://github.com/livelybone/date-generator.git

## Demo
https://livelybone.github.io/tool/date-generator/

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/date-generator.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/date-generator
```

## Global name - The variable the module exported in `umd` bundle
`DateGenerator`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import * as DateGenerator from '@livelybone/date-generator'
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/date-generator/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/date-generator/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/easy-pdf
Description: An easy-to-use PDF rendering library in browser, can be used as a solution to customize the display of PDF in App. Based on mozilla/pdf.js, the js/css is loaded via CDN asynchronously. 一个简便易用的，原生使用方式的（适用于各大框架）网页端 PDF 渲染插件，也可作为小程序/App webview 中自定义展示 pdf 的解
Author: 2631541504@qq.com
Latest version: 1.0.6

# @livelybone/easy-pdf
[![NPM Version](http://img.shields.io/npm/v/@livelybone/easy-pdf.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/easy-pdf)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/easy-pdf.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/easy-pdf)
![gzip with dependencies: 2kb](https://img.shields.io/badge/gzip--with--dependencies-2kb-brightgreen.svg "gzip with dependencies: 2kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

An easy-to-use PDF rendering library in browser, can be used as a solution to customize the display of PDF in App. Based on [mozilla/pdf.js](https://github.com/mozilla/pdfjs-dist), the js/css is loaded via CDN asynchronously.

## repository
https://github.com/livelybone/easy-pdf.git

## Demo
https://github.com/livelybone/easy-pdf#readme

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/easy-pdf.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/easy-pdf
```

## Global name - The variable the module exported in `umd` bundle
`EasyPDF`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import * as EasyPDF from '@livelybone/easy-pdf'

const container = document.getElementById('container')
/** Render all page */
EasyPDF.renderPdf('./sample.pdf', { container }).then(res => {
  console.log(res)
})

/** Render single page */
EasyPDF.readPdf('./sample.pdf').then(pdf => {
  EasyPDF.renderPdfPage(pdf, 1, { container }).then(res => {
    console.log(res)
  })
})
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/easy-pdf/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/easy-pdf/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/meta-scale
Description: A module for get meta-scale
Author: livelybone
Latest version: 2.1.0

# @livelybone/meta-scale
A module for get meta-scale

## repository
https://github.com/livelybone/meta-scale.git

## Demo
https://github.com/livelybone/meta-scale#readme

## Global name
`MetaScale`

## Installation
```bash
npm i -S @livelybone/meta-scale
```

## Usage
```js
import MetaScale from '@livelybone/meta-scale'

const scale = MetaScale()
```
npm package: @livelybone/mouse-events
Description: Some complex mouse events, such as dragMove event with deltaX/deltaY relative to mousedown/touchstart, mouse wheel with good compatibility ...
Author: 2631541504@qq.com
Latest version: 1.0.0

# @livelybone/mouse-events
[![NPM Version](http://img.shields.io/npm/v/@livelybone/mouse-events.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-events)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/mouse-events.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-events)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

Some complex mouse events, such as dragMove event with deltaX/deltaY relative to mousedown/touchstart, mouse wheel with good compatibility ...

## repository
https://github.com/livelybone/mouse-events.git

## Demo
https://github.com/livelybone/mouse-events#readme

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/mouse-events.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/mouse-events
```

## Global name - The variable the module exported in `umd` bundle
`MouseEvents`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```typescript
import { DragMove, Utils, MouseWheel, DragMoveEvent } from '@livelybone/mouse-events'

const el = document.getElementById('el')
let removeListener

removeListener = MouseWheel.bind(el, (ev: MouseWheel.CustomWheelEvent) => {
  // ...
})
removeListener()

removeListener = DragMove.bind(el, (ev: DragMoveEvent) => {
  // ...
})
removeListener()

console.log(Utils.$isMobile)
removeListener = Utils.$addListener(el, 'scroll', ev => {
  // ...
})
removeListener()
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/mouse-events/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/mouse-events/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/mouse-events/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/mouse-events/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/mouse-mock
Description: A lib for mock mouse events like click, move
Author: 2631541504@qq.com
Latest version: 1.3.5

# @livelybone/mouse-mock
[![NPM Version](http://img.shields.io/npm/v/@livelybone/mouse-mock.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-mock)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/mouse-mock.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-mock)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A lib for mock mouse events like click, move

## repository
git@github.com:livelybone/mouse-mock.git

## Demo
https://github.com/livelybone/mouse-mock#readme

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone git@github.com:livelybone/mouse-mock.git`
2. Go to the directory `cd [the-module-directory]`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/mouse-mock
```

## Global name - The variable the module exported in `umd` bundle
`MouseMock`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import * as MouseMock from '@livelybone/mouse-mock'

const el = document.getElementById('id')
MouseMock.mockClick(el)

// or
const pos = { x: 100, y: 100 }
MouseMock.mockClick(pos)
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/mouse-mock/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/mouse-mock/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/mouse-mock/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/mouse-mock/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/mouse-wheel
Description: A module for bind mouse-wheel event. typescript supported
Author: 2631541504@qq.com
Latest version: 4.2.1

# @livelybone/mouse-wheel
[![NPM Version](http://img.shields.io/npm/v/@livelybone/mouse-wheel.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-wheel)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/mouse-wheel.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-wheel)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A module for bind mouse-wheel event. typescript supported

## repository
https://github.com/livelybone/mouse-wheel.git

## Demo
https://github.com/livelybone/mouse-wheel#readme

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/mouse-wheel.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/mouse-wheel
```

## Global name - The variable the module exported in `umd` bundle
`MouseWheel`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```typescript
import { bind, BindOptions, CustomListener, CustomWheelEvent } from '@livelybone/mouse-wheel'

let unbind

const listener: CustomListener = (event: CustomWheelEvent) => {}

const options: BindOptions = {}

// Bind on element
unbind = bind(document.getElementById('id'), listener, options)

// Unbind
unbind()

// Bind on window
unbind = bind(listener, options)

// Unbind
unbind()
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/mouse-wheel/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/mouse-wheel/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/mouse-wheel/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/mouse-wheel/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/owner-window
Description: A module for getting owner window via HTMLElement
Author: 2631541504@qq.com
Latest version: 1.0.1

# @livelybone/owner-window
[![NPM Version](http://img.shields.io/npm/v/@livelybone/owner-window.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/owner-window)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/owner-window.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/owner-window)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A module for getting owner window via HTMLElement

## repository
git@github.com:livelybone/owner-window.git

## Demo
https://github.com/livelybone/owner-window

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone git@github.com:livelybone/owner-window.git`
2. Go to the directory `cd [the-module-directory]`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/owner-window
```

## Global name - The variable the module exported in `umd` bundle
`OwnerWindow`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import { getOwnerWindow } from '@livelybone/owner-window'

const win = getOwnerWindow() // -> Window {....}
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/owner-window/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/owner-window/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/owner-window/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/owner-window/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/promise-wait
Description: A lib with some method about wait apis, including wait, waitUntil
Author: 2631541504@qq.com
Latest version: 1.3.1

# @livelybone/promise-wait
[![NPM Version](http://img.shields.io/npm/v/@livelybone/promise-wait.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/promise-wait)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/promise-wait.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/promise-wait)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A lib with some method about wait apis, including wait, waitUntil

## repository
git@github.com:livelybone/promise-wait.git

## Demo
https://github.com/livelybone/promise-wait@readme

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone git@github.com:livelybone/promise-wait.git`
2. Go to the directory `cd [the-module-directory]`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/promise-wait
```

## Global name - The variable the module exported in `umd` bundle
`PromiseWait`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import { wait, waitUntil } from '@livelybone/promise-wait'

async function fn() {
  await wait(2000)

  await waitUntil(info => info.count > 5)

  await waitUntil(info => info.passedTime > 5000)
}
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/promise-wait/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/promise-wait/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/promise-wait/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/promise-wait/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/react-input
Description: A react input component, realized input validator, formatter. `textarea` available
Author: 2631541504@qq.com
Latest version: 2.5.0

# @livelybone/react-input
[![NPM Version](http://img.shields.io/npm/v/@livelybone/react-input.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/react-input)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/react-input.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/react-input)
![gzip with dependencies: 1kb](https://img.shields.io/badge/gzip--with--dependencies-1kb-brightgreen.svg "gzip with dependencies: 1kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

A react input component, default to disabled change event when composition event triggered

## repository
https://github.com/livelybone/react-input.git

## Demo
https://github.com/livelybone/react-input#readme

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/react-input.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/react-input
```

## Global name
`ReactInput`

## Interface
See in [index.d.ts](./index.d.ts)

## Usage
```typescript jsx
import React from 'react'
import ReactInput from '@livelybone/react-input'

const Comp = () => {
  return (
    <ReactInput
      type="text"
      shouldCompositionEventTriggerChangeEvent={false}
      onChange={(ev) => console.log('onChange', ev, ev.target.value, ev.type)}
      onCompositionEnd={(ev) => {
        console.log('onCompositionEnd', ev.target.value, ev)
      }}
    />
  )
}
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/react-input/lib/umd/)
```html
<script src="https://unpkg.com/@livelybone/react-input/lib/umd/index.js"></script>
```
npm package: @livelybone/request-idle-callback
Description: A polyfill for `window.requestIdleCallback`, support NodeJs. It can be used for time slicing
Author: 2631541504@qq.com
Latest version: 1.1.0

# @livelybone/request-idle-callback
[![NPM Version](http://img.shields.io/npm/v/@livelybone/request-idle-callback.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/request-idle-callback)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/request-idle-callback.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/request-idle-callback)
![gzip with dependencies: 1.1kb](https://img.shields.io/badge/gzip--with--dependencies-1.1kb-brightgreen.svg "gzip with dependencies: 1.1kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")

[中文文档](./README-CN.md)

A polyfill for `window.requestIdleCallback`, support NodeJs. It can be used for time slicing.

The behavior of this module is closer to `window.requestIdleCallback`
than [requestidlecallback](https://www.npmjs.com/package/requestidlecallback), see the details in the example below

## repository
https://github.com/livelybone/request-idle-callback.git

## Demo
https://github.com/livelybone/request-idle-callback#readme

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/request-idle-callback.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/request-idle-callback
```

## Global name - The variable the module exported in `umd` bundle
`RIC`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import * as RIC from '@livelybone/request-idle-callback'

const id = RIC.requestIdleCallback(() => {
  // ... do something
})

RIC.cancelIdleCallback(id)
```

### use as a polyfill:
> in js:
```js
import '@livelybone/request-idle-callback/lib/umd/polyfill';
```

> in html(CDN):
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/request-idle-callback/lib/umd/polyfill.js"></script>
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/request-idle-callback/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/request-idle-callback/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/request-idle-callback/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/request-idle-callback/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/script-injector
Description: A module for script dynamic injection
Author: 2631541504@qq.com
Latest version: 1.2.0

# @livelybone/script-injector
[![NPM Version](http://img.shields.io/npm/v/@livelybone/script-injector.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/script-injector)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/script-injector.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/script-injector)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A module for script dynamic injection

## repository
git@github.com:livelybone/script-injector.git

## Demo
https://github.com/livelybone/script-injector

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone git@github.com:livelybone/script-injector.git`
2. Go to the directory `cd [the-module-directory]`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/script-injector
```

## Global name - The variable the module exported in `umd` bundle
`ScriptInjector`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import * as ScriptInjector from '@livelybone/script-injector'

ScriptInjector.inject('alert("1")')

ScriptInjector.inject('body { background: #000 }', { type: 'css' })
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/script-injector/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/script-injector/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/script-injector/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/script-injector/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/scroll-get
Description: Some useful tool of browser scroll, such as tool for calculating position relative to page/client, tool for getting the native scrollbar width...
Author: 2631541504@qq.com
Latest version: 6.2.1

# @livelybone/scroll-get
[![NPM Version](http://img.shields.io/npm/v/@livelybone/scroll-get.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/scroll-get)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/scroll-get.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/scroll-get)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

Some useful tool of browser scroll, such as tool for calculating position relative to page/client, tool for getting the native scrollbar width...

## repository
https://github.com/livelybone/scroll-get.git

## Demo
https://github.com/livelybone/scroll-get#readme

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/scroll-get.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/scroll-get
```

## Global name - The variable the module exported in `umd` bundle
`ScrollGet`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import {
  getRect, 
  posRelativeToPage, 
  posRelativeToClient, 
  getNativeScrollbarWidth,
  animation,
  scrollToElement,
} from '@livleybone/scroll-get'

/**
 * @result DOMRect | ClientRect | TextRectangle
 * */
var rect = getRect(document.getElementById('id'))
/**
 * @result { pageLeft: Number, pageTop: Number }
 * */
var pos = posRelativeToPage(document.getElementById('id'))
/**
 * @result { clientLeft: Number, clientTop: Number }
 * */
var pos1 = posRelativeToClient(document.getElementById('id'))
/**
 * @param { undefined | Window | Element } el
 * @result { x: Number, y: Number }
 * */
var el = window
var scrollbarInfo = getNativeScrollbarWidth(el)
``` 

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/scroll-get/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/scroll-get/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/simple-observer
Description: A simple implement of observer model and publish-subscribe model
Author: livelybone
Latest version: 4.2.1

# @livelybone/simple-observer
[![NPM Version](http://img.shields.io/npm/v/@livelybone/simple-observer.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/simple-observer)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/simple-observer.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/simple-observer)
![gzip with dependencies: 1kb](https://img.shields.io/badge/gzip--with--dependencies-1kb-brightgreen.svg "gzip with dependencies: 1kb")
![ts](https://img.shields.io/badge/ts-supported-blue.svg "ts")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

A simple implement of observer model and publish-subscribe model

## repository
https://github.com/livelybone/simple-observer.git

## Installation
```bash
npm i -S @livelybone/simple-observer
```

## Global name
`SimpleObserver`

## Usage
> Observer model
```js
import { Subject, Observer } from '@livleybone/simple-observer'

const subject = new Subject()
const observer = new Observer((...args) => console.log(...args))

// Method -> addObserver
subject.addObserver(observer)

// Method -> notify
// Notify the observers with data
subject.notify(1) // -> console: 1
subject.notify(1, 2) // -> console: 1 2

// Method -> getObserversCount
// Get the number of observers
subject.getObserversCount() // -> 1

// Method -> removeObserver
subject.removeObserver(observer)
```

> Publish-Subscribe model
```js
import { PublishSubscribe } from '@livleybone/simple-observer'

const pubSub = new PublishSubscribe()

// Method -> subscribe
// Subscribe the data provided by publisher
const subscriber = (...args) => console.log(...args)
const subscriberId = pubSub.subscribe(subscriber)

// Method -> publish
// Publish data
pubSub.publish(1) // -> console: 1
pubSub.publish(1, 2) // -> console: 1 2

// Method -> getSubscribersCount
// Get the number of subscribers
pubSub.getSubscribersCount() // -> 1

// Method -> unsubscribe
// Unsubscribe the subscriber via id or callback function of subscriber
pubSub.unsubscribe(subscriberId)
// or pubSub.unsubscribe(subscriber)
```
npm package: @livelybone/simple-unique-id
Description: A simple unique-id generator
Author: 2631541504@qq.com
Latest version: 1.0.0

# @livelybone/simple-unique-id
[![NPM Version](http://img.shields.io/npm/v/@livelybone/simple-unique-id.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/simple-unique-id)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/simple-unique-id.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/simple-unique-id)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A simple unique-id generator

## repository
https://github.com/livelybone/simple-unique-id.git

## Demo
https://github.com/livelybone/simple-unique-id#readme

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/simple-unique-id.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/simple-unique-id
```

## Global name - The variable the module exported in `umd` bundle
`simpleUniqueId`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```js
import simpleUniqueId from '@livelybone/simple-unique-id'
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/simple-unique-id/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/simple-unique-id/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/source-map-reverse
Description: A module for reverse-parsing code
Author: 2631641604@qq.com
Latest version: 1.1.1

# @livelybone/source-map-reverse
[![NPM Version](http://img.shields.io/npm/v/@livelybone/source-map-reverse.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/source-map-reverse)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/source-map-reverse.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/source-map-reverse)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")

[中文文档](./README-CN.md)

A module for reverse-parsing code

## repository
git@github.com:livelybone/source-map-reverse.git

## Installation
```bash
npm i -g @livelybone/source-map-reverse
```

## Usage
```bash
# sourcemap-reverse [filePath] [line] [column]
sourcemap-reverse ./dir/filename.js.map 1 22947
```
npm package: @livelybone/use-async-data
Description: A react hook for deal data that generated asynchronously
Author: 2631541504@qq.com
Latest version: 2.2.2

# @livelybone/use-async-data
[![NPM Version](http://img.shields.io/npm/v/@livelybone/use-async-data.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/use-async-data)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/use-async-data.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/use-async-data)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A react hook for deal data that generated asynchronously

## repository
https://github.com/livelybone/use-async-data.git

## Demo
https://github.com/livelybone/use-async-data#readme

## Run Example
you can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/use-async-data.git`
2. Go to the directory `cd use-asyn-data`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/use-async-data
```

## Global name - The variable the module exported in `umd` bundle
`useAsyncData`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```typescript jsx
import useAsyncData from '@livelybone/use-async-data'

function getAsyncData(arg1: any, arg2: any): Promise<any> {
  // get data asynchronously via fetch/xhr/mock
}

const App = () => {
  // `setData` is used to update data manually
  const { data, getData, isFetching, setData } = useAsyncData(
    getAsyncData,
    {},
    console.error,
  )

  return (
    <article>
      <button
        onClick={() =>
          getData('first argument', 'second argument').catch(console.error)
        }
      >
        Get Data
      </button>

      <p>Is Fetching: {isFetching}</p>
      <p>Data: {JSON.stringify(data)}</p>
    </article>
  )
}
```

## CDN
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@livelybone/use-async-data/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/use-async-data/lib/umd/<--module-->.js"></script>
```

Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/use-async-data/lib/umd/)
```html
<script src="https://cdn.jsdelivr.net/npm/@livelybone/use-async-data/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/use-count-down
Description: A react hook for seconds count down
Author: 2631541504@qq.com
Latest version: 1.0.0

# @livelybone/use-count-down
[![NPM Version](http://img.shields.io/npm/v/@livelybone/use-count-down.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/use-count-down)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/use-count-down.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/use-count-down)
![gzip with dependencies: 0.6kb](https://img.shields.io/badge/gzip--with--dependencies-0.6kb-brightgreen.svg "gzip with dependencies: 0.6kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A react hook for seconds count down

## repository
https://github.com/livelybone/use-count-down.git

## Demo
https://github.com/livelybone/use-count-down#readme

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/use-count-down.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/use-count-down
```

## Global name - The variable the module exported in `umd` bundle
`useCountDown`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```typescript jsx
import React from 'react'
import useCountDown from '@livelybone/use-count-down'

const Comp = () => {
  const {count, isRunning, start, stop} = useCountDown(60)
  
  return (
    <div>
      {isRunning ? `${count}s` : 'click the right button the start'}
      <button onClick={start}>start</button>
      <button onClick={stop}>stop</button>
    </div>
  )
}
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/use-count-down/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/use-count-down/lib/umd/<--module-->.js"></script>
```
npm package: @livelybone/use-force-update
Description: A hook for force update of react
Author: 2631541504@qq.com
Latest version: 1.0.1

# @livelybone/use-force-update
[![NPM Version](http://img.shields.io/npm/v/@livelybone/use-force-update.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/use-force-update)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/use-force-update.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/use-force-update)
![gzip with dependencies: 0.3kb](https://img.shields.io/badge/gzip--with--dependencies-0.3kb-brightgreen.svg "gzip with dependencies: 0.3kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

[中文文档](./README-CN.md)

A hook for force update of react

## repository
https://github.com/livelybone/use-force-update.git

## Demo
https://github.com/livelybone/use-force-update#readme

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/use-force-update.git`
2. Go to the directory `cd your-module-directory`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/use-force-update
```

## Global name - The variable the module exported in `umd` bundle
`useForceUpdate`

## Interface
See what method or params you can use in [index.d.ts](./index.d.ts)

## Usage
```typescript jsx
import React from 'react'
import useForceUpdate from '@livelybone/use-force-update'

const Page = () => {
  const [count, forceUpdate] = useForceUpdate()
  
  return (
    <div>
      force update count: {count}
      <button onClick={forceUpdate}>force update</button>
    </div>
  )
}
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/use-force-update/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/use-force-update/lib/umd/<--module-->.js"></script>
```