open-index/open-npm huggingface dataset:
npm package: @gitee-plugin/osc-file-uploader
Description: 文件上传模块
Author: osc
Latest version: 0.0.4

## 文件上传模块
基于 [simple-uploader.js](https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md) 修改，以满足业务需求，支持秒传、分片上传、断点续传。

文件上传流程：
- 选择文件
- 计算文件唯一 id（xxhash 或 md5，默认是 xxhash）
- 发起进度检查的请求，查询文件是否已经上传，如果已经完整上传，则属于秒传的情况，直接返回文件 url；如果没有上传或者已经上传部分分片，则返回未上传的分片数组
- 针对每一个未上传的分片，发起上传请求
- 当所有分片上传完成后，发起合并请求，合并成功后，返回文件 url
- 在分片上传过程中，可以暂停上传。而继续开始上传时，会先再次发起进度检查的请求，查询剩余需要上传的分片（因为有可能其他地方已经上传了当前文件的部分分片），然后再发起上传请求

### 安装
```
npm install @mofiter/osc-file-uploader
```
### 使用
创建一个 Uploader 实例：
```
var uploader = new Uploader({})
```
指定 DOM 节点，点击选择文件：
```
uploader.assignBrowse(document.getElementById('upload-btn'))
```
指定 DOM 节点，拖拽选择文件：
```
uploader.assignDrop(document.getElementById('drop-target'))
```
监听文件上传过程中的事件：
```
// 添加单个文件，可以用于文件校验，如果返回 false，则不添加
uploader.on('fileAdded', function (file, event) {
    console.log('fileAdded', file, event)
})
// 添加多个文件，可以用于文件校验，
uploader.on('filesAdded', function (files, fileList, event) {
  console.log('filesAdded', files, fileList, event)
})
// 文件已经加入到上传列表中，一般用来开始整个的上传
uploader.on('filesSubmitted', function (files, fileList, event) {
  // files 是本次加入到上传列表中的文件，uploader.files 是已经加入到上传列表中的全部文件
  console.log('filesSubmitted', files, fileList, event)
})
// 一个文件被移除
uploader.on('fileRemoved', function (file) {
  console.log('fileRemoved', file)
})
```
### 常用 API
#### 配置项
见[原有配置](https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE)，已经基于业务逻辑，改了很多默认的配置项，所以大多数不需要修改
- target：可以是一个函数，用来返回接口地址，函数参数为文件 file，分片 chunk，是否是进度检查的请求 isTest，是否是合并请求 isMerge。根据不同情况，返回不同接口地址 url
- processParams：可以是一个函数，用来返回接口需要的参数，函数参数为默认参数 params，文件 file，分片 chunk，是否是进度检查的请求 isTest，是否是合并请求 isMerge。根据不同情况，返回不同接口需要的参数
- autoUpload（新增）：是否选择文件后自动开始上传，默认为 false
- hashType（新增）：用来配置计算文件唯一 id 的方式，默认是 xxhasm，可以配置成 md5，但需要和后端保持一致，否则会导致合并失败
- statusText（新增）：用来配置文件上传过程中不同状态的文字内容
#### 方法
见[原有方法](https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E6%96%B9%E6%B3%95)
手动开始上传时，调用 resume() 方法，不要调用 upload() 方法
#### 事件
在[原有事件](https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E4%BA%8B%E4%BB%B6)的基础上，增加了 `calcHashStart`、`calcHashEnd`、`fileMergeStart`、`fileMergeEnd`、`fileStatus` 几个事件
- uploader.on('calcHashStart', function(file) {})：开始计算文件唯一 id 时的事件，回调参数为当前文件 file
- uploader.on('calcHashEnd', function(file, hash) {})：计算文件唯一 id 完成时的事件，回调参数为当前文件 file，文件 hash
- uploader.on('fileMergeStart', function(file) {})：开始合并文件时的事件，回调参数为当前文件 file
- uploader.on('fileMergeEnd', function(file) {})：合并文件结束时的事件，回调参数为当前文件 file
- uploader.on('fileStatus', function(file, status, statusText) {})：文件上传的当前状态，有等待上传、正在计算唯一 id、上传中、上传暂停、合并中、上传成功、上传出错等几种情况，回调参数为当前文件 file，状态 status，状态文本 statusText，可以通过 uploader 的配置项 statusText 修改文本内容
npm package: @gitee/icons-react
Description: Gitee Icons React component
Author: bluishoul@gmail.com
Latest version: 0.1.49

# @gitee/icons-react

基于 `@gitee/icons` 提供的 `IconifyIcon` 数据生成的 React 组件库。

## 如何使用

### 示例

请参考 [examples/nextjs](examples/nextjs)

### 安装

```shell
yarn add @gitee/icons-react
```

### 配置转译

由于 `@gitee/icons-react` 暴露的是 JSX 代码，所以需要配置编译工具对其进行转译。

#### Webpack

```js
rules: [
  {
    test: /\.[tj]sx?$/,
    exclude: {
      or: [/node_modules/, /bower_components/],
      not: [/node_modules\/@gitee\/icons-react/],
    },
    use: ["babel-loader"],
  },
  // other rules...
];
```

#### Next.js

```js
const withTM = require("next-transpile-modules")(["@gitee/icons-react"]);

module.exports = withTM({
  reactStrictMode: true,
});
```

### 在项目中使用

1. 按需引入

```jsx
import { IconApp } from "@gitee/icons-react";

function AComponent() {
  return (
    <div>
      <IconApp width={24} color="#909aaa" />
    </div>
  );
}
```

2. 批量引入

```jsx
import {
  IconProjectTypeKanban,
  IconProjectTypeScrum,
  IconProjectTypeStandard,
} from "@gitee/icons-react";

function IconProjectType(name) {
  switch (name) {
    case "project-type-kanban":
      return <IconProjectTypeKanban width={24} />;
    case "project-type-scrum":
      return <IconProjectTypeScrum width={24} />;
    case "project-type-standard":
      return <IconProjectTypeStandard width={24} />;
    default:
      return null;
  }
}

function AComponent() {
  return (
    <div>
      {[
        "project-type-kanban",
        "project-type-scrum",
        "project-type-standard",
      ].map((name) => (
        <IconProjectType name={name} />
      ))}
    </div>
  );
}
```

不推荐使用下面的方法批量引入（无法 Tree-Shaking），而使用按需引入。

```jsx
import Icon from "@gitee/icons-react/dist/icon";

function AComponent() {
  return (
    <div>
      {[
        "project-type-kanban",
        "project-type-scrum",
        "project-type-standard",
      ].map((name) => (
        <Icon key={name} name={name} width={24} />
      ))}
    </div>
  );
}
```

3. 全部引入

```jsx
import Icon, { iconNames } from "@gitee/icons-react/dist/icon";

function AComponent() {
  return (
    <div>
      {iconNames.map((name) => (
        <Icon key={name} name={name} width={24} />
      ))}
    </div>
  );
}
```

## 开发

1. 安装依赖：因为在项目最顶层使用了 `yarn workspace`，安装依赖请直接在顶层目录执行 `yarn`
2. 构建 `@gitee/icons` 依赖，由于使用了 Turborepo, 在顶层目录执行 `yarn build --filter=@gitee/icons` 即可
3. 修改 [templates](./templates) 目录中的 Handlebars 模板文件
4. 执行 `yarn build` 生成新的组件和类型文件。
npm package: @gitee/typescript-sdk-v5
Description: TypeScript SDK for Gitee OpenAPI V5
Author: 诺墨
Latest version: 5.4.86

## Introduce

TypeScript SDK for Gitee OpenAPI V5

## Usage

```bash
npm i @gitee/typescript-sdk-v5
```

## LICENSE

TypeScript SDK for Gitee OpenAPI V5 is released under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @gitee/typescript-sdk-v8
Description: TypeScript SDK for Gitee Enterprise OpenAPI (Gitee OpenAPI V8)
Author: 诺墨
Latest version: 0.1.335

## Introduce

TypeScript SDK for Gitee Enterprise OpenAPI(Gitee OpenAPI V8)

## Usage

```bash
npm i @gitee/typescript-sdk-v8
```

## LICENSE

TypeScript SDK for Gitee Enterprise OpenAPI is released under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @giteeteam/qiankun
Description: A completed implementation of Micro Frontends
Author: StevenJC
Latest version: 2.9.0-alpha.0

<p align="center">
  <a href="https://qiankun.umijs.org">
    <img src="https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png" alt="qiankun" width="180" />
  </a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/qiankun"><img src="https://img.shields.io/npm/v/qiankun.svg?style=flat-square" alt="npm version" /></a>
  <a href="https://codecov.io/gh/umijs/qiankun"><img src="https://img.shields.io/codecov/c/github/umijs/qiankun.svg?style=flat-square" alt="coverage" /></a>
  <a href="https://www.npmjs.com/package/qiankun"><img src="https://img.shields.io/npm/dt/qiankun.svg?style=flat-square" alt="npm downloads" /></a>
  <a href="https://travis-ci.com/umijs/qiankun"><img src="https://img.shields.io/github/workflow/status/umijs/qiankun/CI.svg?style=flat-square" alt="build status" /></a>
  <a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue" alt="dumi" /></a>
</p>

# qiankun（乾坤）

## Bugfixed

1. 修复 qiankun 嵌套时 dom 操作劫持异常

## TODO：

1. 增加 despose 实例支持
npm package: @giterman/vue-slider-component
Description: A highly customized slider component
Author: NightCatSama
Latest version: 3.2.20

![banner](https://raw.githubusercontent.com/NightCatSama/vue-slider-component/master/.github/banner.jpg)

[![downloads](https://img.shields.io/npm/dm/vue-slider-component.svg)][npm]
[![npm-version](https://img.shields.io/npm/v/vue-slider-component.svg)][npm]
[![license](https://img.shields.io/npm/l/express.svg)]()

> 🎚 A highly customized slider component

English | [简体中文][ch] | [Русский][ru]

## 🍉 Vue3.x

This is still in beta and may contain unexpected bugs, please use with caution.

#### install

```bash
$ yarn add vue-slider-component@next
# npm install vue-slider-component@next --save
```

#### Breaking Changes

- `value` -> `modelValue`. ([Official API Changes](https://v3-migration.vuejs.org/breaking-changes/v-model.html#v-model))

## ✨ Features

- 🍖 More customizable
- 👗 Multiple style themes
- 🐳 Support for more sliders
- 📌 Add marks
- 🎉 Support SSR
- 🍒 Support Typescript

## 📚 Documentation

Document: <https://nightcatsama.github.io/vue-slider-component>

Live Demo: <https://jsfiddle.net/NightCatSama/2xy72dod/10547/>

## 🎯 install

```bash
$ yarn add vue-slider-component
# npm install vue-slider-component --save
```

## 🚀 Usage

<details><summary>Vue 2</summary>

```vue
<template>
  <vue-slider v-model="value" />
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider,
  },

  data() {
    return {
      value: 0,
    }
  },
}
</script>
```

</details>

<details><summary>Vue 3</summary>

```vue
<template>
  <vue-slider v-model="value" />
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  setup() {
    const data = reactive({ value: 0 })
    return toRefs(data)
  },
}
</script>
```

</details>

## Changelog

Detailed changes for each release are documented in the [release notes](https://github.com/NightCatSama/vue-slider-component/blob/master/CHANGELOG.md).

## Support

If my code has helped you, please consider [buy me a coffee](https://www.buymeacoffee.com/nightcat) ☕.

## License

[MIT](https://github.com/NightCatSama/vue-slider-component/blob/master/LICENSE)

[npm]: https://www.npmjs.com/package/vue-slider-component
[en]: https://github.com/NightCatSama/vue-slider-component/blob/master/README.md
[ch]: https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md
[ru]: https://github.com/NightCatSama/vue-slider-component/blob/master/README-RU.md
npm package: @giteshdohare/testrail-jest-reporter
Description: Jest based reporter for creating a new run and sending test results to TestRail
Author: Gitesh Dohare
Latest version: 1.0.1

[![TestRail v4.1](https://img.shields.io/badge/TestRail%20API-v2-green.svg)](http://docs.gurock.com/testrail-api2/start)

# Testrail reporter for Jest

## Description

[TestRail](https://www.gurock.com/testrail/) module for [Jest](https://jestjs.io/)

It can automatically create a new test runs on TestRail for multiple suites and send results.


## Install

```code
npm i @giteshdohare/testrail-jest-reporter
```

## Example - **jest-config.js**

The Reporter must be specified in the Jest config file (jest-config.js), under 'reporters'.

```javascript
module.exports = {
  ...
  reporters: [
    ["@giteshdohare/testrail-jest-reporter"]
  ]
};
```

## Example - tests

The Suite ID from TestRail must be added to the start of top _describe()_ description, ID should be in *TestRail[**ID**]*.

The Case ID from TestRail must be added to the start of each _it()_ description, ID should be in *TestRail[**ID**]*.

```javascript
// "1:" this is Suite ID from Test Rail (Will work only for top)
describe("TestRail[1] Suite", () => {
  // "11:" this is Case ID from Test Rail
  it("TestRail[11] Test success", async () => {
    expect(1).toBe(1);
  });

  it("TestRail[12] Test fail", async () => {
    expect(1).toBe(0);
  });

  xit("TestRail[13] Test skip", async () => {
    expect(1).toBe(1);
  });
});
```

**Note:** The Case ID is a unique and permanent ID of every test case (e.g. C125),
<br>and shoudn't be confused with a Test Case ID, which is assigned to a test case<br> when a new run is created (e.g. T325).

**Note**: Test run will not be added if Case ID/Suite ID is incorrect.

## ENV requirements 

Project needs 4 parameters to work correctly with testrail

```javascript
TESTRAIL_URL = https://<YourProjectURL>.testrail.io
TESTRAIL_USERNAME = email address
TESTRAIL_PASSWORD = password or API key
TESTRAIL_PROJECT_ID = 1
```
## Credit
Forked from: https://github.com/jest-reporters/testrail
<br/>
Orginal Author: [@rankery](https://github.com/rankery)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.
npm package: @gitethan/snackbar
Description: Fork of Quenty's Snackbar. Snackbars provide lightweight feedback on an operation at the base of the screen. They automatically disappear after a timeout or user interaction. There can only be one on the screen at a time.
Latest version: 11.6.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## Snackbar
<div align="center">
  <a href="http://quenty.github.io/NevermoreEngine/">
    <img src="https://github.com/Quenty/NevermoreEngine/actions/workflows/docs.yml/badge.svg" alt="Documentation status" />
  </a>
  <a href="https://discord.gg/mhtGUS8">
    <img src="https://img.shields.io/discord/385151591524597761?color=5865F2&label=discord&logo=discord&logoColor=white" alt="Discord" />
  </a>
  <a href="https://github.com/Quenty/NevermoreEngine/actions">
    <img src="https://github.com/Quenty/NevermoreEngine/actions/workflows/build.yml/badge.svg" alt="Build and release status" />
  </a>
</div>

Snackbars provide lightweight feedback on an operation at the base of the screen. They automatically disappear after a timeout or user interaction. There can only be one on the screen at a time.

<div align="center"><a href="https://quenty.github.io/NevermoreEngine/api/SnackbarServiceClient">View docs →</a></div>

## Installation
```
npm install @quenty/snackbar --save
```

## Usage
Using the snackbar should be done via the SnackbarManager, which ensures only one snackbar can be visible at a time.

```lua
local snackbarServiceClient = serviceBag:GetService(SnackbarServiceClient)

snackbarServiceClient:ShowSnackbar("Settings saved!", {
  CallToAction = {
    Text = "Undo";
    OnClick = function()
      print("Activated action")
    end;
  }
})
```
npm package: @gitforge/sdk
Description: TypeScript SDK for the GitForge REST API
Latest version: 0.1.0

# @gitforge/sdk

TypeScript SDK for [GitForge](https://git-forge.dev) — Git infrastructure for developers who build on Git.

## Install

```bash
npm install @gitforge/sdk
```

## Quick Start

```typescript
import { GitForge } from "@gitforge/sdk";

const client = new GitForge({
  baseUrl: "https://api.git-forge.dev",
  token: "gf_your_token_here",
});

// Create a repo
const repo = await client.repos.create({
  name: "my-repo",
  visibility: "private",
});

// Commit files without a git client
await client.commits
  .create(repo.id, {
    branch: "main",
    message: "initial commit",
    authorName: "Your Name",
    authorEmail: "you@example.com",
  })
  .addFile("README.md", "# My Project")
  .addFile("src/index.ts", "console.log('hello');")
  .send();

// List repos
const { data } = await client.repos.list({ limit: 10 });

// Browse files
const tree = await client.files.getTree(repo.id, "main", "/");

// Search code
const results = await client.search.code("function handlePush");
```

## Resources

The SDK exposes these resource classes on the client:

| Resource | Methods |
|----------|---------|
| `repos` | `create`, `list`, `get`, `update`, `delete` |
| `branches` | `list`, `create`, `delete`, `promote` |
| `tags` | `list`, `create`, `delete` |
| `commits` | `create` (builder), `list`, `get` |
| `files` | `getBlob`, `getTree` |
| `search` | `code` |
| `tokens` | `create`, `list`, `revoke` |
| `credentials` | `list`, `create`, `delete` |
| `mirrors` | `list`, `create`, `sync`, `delete` |
| `webhooks` | `create`, `list`, `update`, `delete`, `test` |

## Pagination

```typescript
import { paginate } from "@gitforge/sdk";

for await (const repo of paginate((limit, offset) =>
  client.repos.list({ limit, offset })
)) {
  console.log(repo.name);
}
```

## Webhook Validation

```typescript
import { validateWebhook } from "@gitforge/sdk/webhooks";

const isValid = validateWebhook({
  payload: rawBody,
  signature: req.headers["x-gitforge-signature"],
  secret: "your_webhook_secret",
  timestamp: req.headers["x-gitforge-timestamp"],
  tolerance: 300, // seconds
});
```

## Error Handling

```typescript
import { GitForgeError } from "@gitforge/sdk";

try {
  await client.repos.get("nonexistent");
} catch (err) {
  if (err instanceof GitForgeError) {
    console.log(err.status); // 404
    console.log(err.code);   // "NOT_FOUND"
    console.log(err.message);
  }
}
```

## Contributing

This SDK is developed inside the [GitForge monorepo](https://github.com/Nu11ified/GitForge) at `sdks/typescript/` and published to this repo via git subtree.

To contribute:

1. Clone the monorepo: `git clone https://github.com/Nu11ified/GitForge.git`
2. Install dependencies: `bun install`
3. Make changes in `sdks/typescript/`
4. Run tests: `bun test sdks/typescript/`
5. Submit a PR to the monorepo

## License

MIT
npm package: @gitgate/gg-cli
Description: gitgate CLI — manage repos, issues, PRs, and CI from the terminal
Author: flarefound
Latest version: 0.2.0

# @gitgate/gg-cli

Command-line interface for [gitgate](https://gitgate.com) — modern git hosting on Cloudflare's edge.

## Install

```bash
npm install -g @gitgate/gg-cli
```

## Authenticate

```bash
gg auth login --token gg_your_token
gg auth status
```

Create a token at gitgate.com/settings/tokens, or use `gg auth token create`.

## Commands

### Repositories

```bash
gg repo create my-project
gg repo list
gg repo view owner/repo
gg repo clone owner/repo
gg repo fork owner/repo
gg repo delete owner/repo
```

### Pull Requests

```bash
gg pr create --title "Add feature" --base main --head feature-branch
gg pr list
gg pr view owner/repo 5
gg pr merge owner/repo 5 --strategy squash
gg pr review owner/repo 5 --approve
gg pr diff owner/repo 5
gg pr close owner/repo 5
```

### Issues

```bash
gg issue create --title "Bug report"
gg issue list
gg issue view owner/repo 12
gg issue close owner/repo 12
gg issue comment owner/repo 12 "Fixed in #5"
```

### CI/CD

```bash
gg run list owner/repo
gg run view owner/repo 42
gg run rerun owner/repo 42
gg run cancel owner/repo 42
```

### Search

```bash
gg search "handleAuth" --scope code
gg search "my-project" --scope repos
gg search "login bug" --scope issues
```

### Import from GitHub

```bash
gg import github https://github.com/you/repo --token ghp_...
```

Imports full git history (objects, branches, tags), issues, PRs, and labels.

### Visualizations

```bash
gg viz owner/repo              # Full dashboard
gg viz activity owner/repo     # Weekly commit activity
gg viz langs owner/repo        # Language breakdown
```

## Configuration

Config is stored at `~/.config/gg-cli/config.json`:

```json
{
  "token": "gg_...",
  "username": "alice",
  "apiUrl": "https://api.gitgate.com"
}
```

The CLI connects to `https://api.gitgate.com` by default. No configuration needed.

## License

MIT
npm package: @gitgraph/node
Description: Draw pretty git graphs in the terminal, with node.js
Author: Nicolas Carlo
Latest version: 0.1.18

**❗ This rendering library is still under development and is not stable.**

# `@gitgraph/node`

[![version](https://img.shields.io/npm/v/@gitgraph/node.svg?logo=npm)](https://www.npmjs.com/package/@gitgraph/node)
[![Changelog](https://img.shields.io/badge/%F0%9F%93%94-changelog-CD9523.svg)](https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-node/CHANGELOG.md)

Draw pretty git graphs in your terminal.

> This is the node.js rendering library of [GitGraph.js][gitgraph-repo].

![Gitgraph node in action](./assets/gitgraph-node-in-action.png)

## Get started

> You need to have [npm][get-npm] installed.

Install the package with npm: `npm i --save @gitgraph/node`

Then, use it in your node.js scripts.

[get-npm]: https://www.npmjs.com/get-npm

## Example of usage

Let's pretend this is your `index.js`:

```js
const { Gitgraph, render } = require("@gitgraph/node");

const gitgraph = new Gitgraph();

// Simulate git commands with Gitgraph API.
const master = gitgraph.branch("master");
master.commit("Set up the project");

const develop = master.branch("develop");
develop.commit("Add TypeScript");

const aFeature = develop.branch("a-feature");
aFeature
  .commit("Make it work")
  .commit("Make it right")
  .commit("Make it fast");

develop.merge(aFeature);
develop.commit("Prepare v1");

master.merge(develop).tag("v1.0.0");

// Call `render` to log the graph in terminal.
render(gitgraph);
```

Running `node index.js` will produce following output:

![Example usage](./assets/example-usage.png)

[gitgraph-repo]: https://github.com/nicoespeon/gitgraph.js/
npm package: @gitgraph/react
Description: Draw pretty git graphs in the browser, with React
Author: Nicolas Carlo
Latest version: 1.6.0

# `@gitgraph/react`

[![version](https://img.shields.io/npm/v/@gitgraph/react.svg?logo=npm)](https://www.npmjs.com/package/@gitgraph/react)
[![Changelog](https://img.shields.io/badge/%F0%9F%93%94-changelog-CD9523.svg)](https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-react/CHANGELOG.md)

Draw pretty git graphs with React.

> This is the React rendering library of [GitGraph.js][gitgraph-repo].

## Get started

> You need to have [npm][get-npm] installed.

Install the package with npm: `npm i --save @gitgraph/react`

Now you can use the `<GitGraph>` component:

```jsx
const { Gitgraph } = require("@gitgraph/react");

function MyComponent() {
  return (
    <Gitgraph>
      {(gitgraph) => {
        // Simulate git commands with Gitgraph API.
        const master = gitgraph.branch("master");
        master.commit("Initial commit");

        const develop = master.branch("develop");
        develop.commit("Add TypeScript");

        const aFeature = develop.branch("a-feature");
        aFeature
          .commit("Make it work")
          .commit("Make it right")
          .commit("Make it fast");

        develop.merge(aFeature);
        develop.commit("Prepare v1");

        master.merge(develop).tag("v1.0.0");
      }}
    </Gitgraph>
  );
}
```

`<MyComponent>` will render the following graph:

![Example of usage][assets-example]

## More examples

[A bunch of scenarios][stories] has been simulated in our Storybook. You can give them a look 👀

[get-npm]: https://www.npmjs.com/get-npm
[gitgraph-repo]: https://github.com/nicoespeon/gitgraph.js/
[stories]: https://github.com/nicoespeon/gitgraph.js/tree/master/packages/stories/src/gitgraph-react/
[assets-example]: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-react/assets/example-usage.png?raw=true
npm package: @gitgw/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: GW
Latest version: 1.0.5

# @gitgw/use-before-leave
React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.

## Installation
### npm
```npm i @gitgw/use-before-leave```

### yarn
```yarn add @gitgw/use-before-leave```

## Usage
```javascript
import React from "react";
import useBeforeLeave from "@gitgw/use-before-leave";

function App() {

  const onBeforeLeave = ()=>{
    console.log("onBeforeLeave");
  }

  useBeforeLeave(onBeforeLeave);

  return (
    <div className="App"></div>
  );
}
```

### Arguments
Argument|Type|Description|Required|
|-|-|-|-|
|onBeforeLeave|Function|Function to be called when the mouse leaves the document|yes
npm package: @gitgw/use-confirm
Description: React Hook to prompt a confirmation before executing a function.
Author: GW
Latest version: 1.0.5

# @gitgw/use-confirm
React Hook to prompt a confirmation before executing a function.

## Installation
### npm
```npm i @gitgw/use-confirm```

### yarn
```yarn add @gitgw/use-confirm```

## Usage
```javascript
import React from "react";
import useConfirm from "@gitgw/use-confirm";

function App() {
  const onConfirm = () => {
    console.log("onConfirm");
  }
  const onCancel = () => {
    console.log("onCancel");
  }

  const confirmAction = useConfirm("true or false?", onConfirm, onCancel);
  
  return (
    <div className="App">
      <button onClick={confirmAction}>confirmAction</button>;
    </div>
  );
}
```

### 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|yes

### Return
Return value|Type|Description|Default value|
|-|-|-|-|
|Function|Function|Function wrapped around the confirmation logic|null
npm package: @gitgw/use-fade-in
Description: React Hook to fade in any element.
Author: GW
Latest version: 1.0.1

# @gitgw/use-fade-in
React Hook to fade in any element.

## Installation
### npm
```npm i @gitgw/use-fade-in```

### yarn
```yarn add @gitgw/use-fade-in```

## Usage
```javascript
import React from "react";
import useFadeIn from "@gitgw/use-fade-in";

function App() {
  const fadeIn = useFadeIn(3, 5);
  
  return (
    <div className="App">
      <h1 {...fadeIn}>This will fade in.</h1>
    </div>
  );
}
```

### 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:
Return value|Type|Description|Default value|
|-|-|-|-|
|ref|React ref|A ref created to fadeIn the element|element
|style|Object|Style object containing to give to the element as a default|opacity: 0
npm package: @gitgw/use-fullscreen
Description: React Hook to make any element go Fullscreen.
Author: GW
Latest version: 1.0.3

# @gitgw/use-fullscreen
React Hook to make any element go Fullscreen.

## Installation
### npm
```npm i @gitgw/use-fullscreen```

### yarn
```yarn add @gitgw/use-fullscreen```

## Usage
```javascript
import React from "react";
import useFullscreen from "@gitgw/use-fullscreen";

function App() {
  const onChange = (isFull) => {
    console.log("onChange");
  }
  const { element, enterFullScreen, exitFullScreen } = useFullscreen(onChange);

  return (
    <div className="App">
      <button onClick={enterFullScreen}>enterFullScreen</button>;
      <button onClick={exitFullScreen}>exitFullScreen</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
|enterFullScreen|Function|Function to make the element enter fullscreen
|exitFullScreen|Function|Function to make the document exit fullscreen
npm package: @gitgw/use-hover
Description: React Hook to detect a hover on an any React Element.
Author: GW
Latest version: 1.0.2

# @gitgw/use-hover
React Hook to detect a hover on an any React Element.

## Installation
### npm
```npm i @gitgw/use-hover```

### yarn
```yarn add @gitgw/use-hover```

## Usage
```javascript
import React from "react";
import useHover from "@gitgw/use-hover";

function App() {

  const onHover = ()=>{
    console.log("OnHover");
  }

  const markedRef = useHover(onHover);
  
  return (
    <div className="App">
      <div ref={markedRef}>Hello</div>
    </div>
  );
}
```

### 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: @gitgw/use-input
Description: React Hook to check the number of characters in input.
Author: GW
Latest version: 1.0.6

# @gitgw/use-input

React Hook that checks the length of the input.

## Installation

### npm

```
npm i @gitgw/use-input
```

### yarn

```
yarn add @gitgw/use-input
```

## Usage

```javascript
import React from "react";
import useInput from "@gitgw/use-input";

function App() {

  const checkIdLength = (value) => {
    return value.length < 5;
  }
  const checkPasswordLength = (value) => {
    return value.length < 10;
  }

  const inputId = useInput("", checkIdLength);
  const inputPassword = useInput("", checkPasswordLength);
  
  return (
    <div className="App">
      <input type="text" placeholder="ID" {...inputId}/>
      <input type="password" placeholder="Password" {...inputPassword}/>
    </div>
  );
}
```

### Arguments

Argument|Type|Description|Required|
|-|-|-|-|
|value|String|The value you want to use on your input|yes
|checkLength|Function|Function used to check input length|yes

### Return

Return value|Type|Description|Default value|
|-|-|-|-|
|Object|Object|An object containing input values and checkLength function|{value:"", onChange: f}
npm package: @gitgw/use-network
Description: React Hook to listen when the user goes online or offline.
Author: GW
Latest version: 1.0.1

# @gitgw/use-network
React Hook to listen when the user goes online or offline.

## Installation
### npm
```npm i @gitgw/use-network```

### yarn
```yarn add @gitgw/use-network```

## Usage
```javascript
import React from "react";
import useNetwork from "@gitgw/use-network";

function App() {

  const onNetworkChange = ()=>{
    console.log("onNetworkChange");
  }

  const isOnline=useNetwork(onNetworkChange);

  return (
    <div className="App">
      <h1>{isOnline ? "Online" : "Offline"}</h1>
    </div>
  );
}
```

### 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: @gitgw/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page.
Author: GW
Latest version: 1.0.1

# @gitgw/use-prevent-leave
React Hook to prompt the user for confirmation before leaving the page.

## Installation
### npm
```npm i @gitgw/use-prevent-leave```

### yarn
```yarn add @gitgw/use-prevent-leave```

## Usage
```javascript
import React from "react";
import usePreventLeave from "@gitgw/use-prevent-leave";

function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();

  return (
    <div className="App">
      <button onClick={enablePrevent}>enablePrevent</button>;
      <button onClick={disablePrevent}>disablePrevent</button>;
    </div>
  );
}
```

### Return
Return value|Type|Description|
|-|-|-|
|enablePrevent|Function|Function to use enable the leaving prevention
|disablePrevent|Function|Function to use disable the leaving prevention
npm package: @gitgw/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll.
Author: GW
Latest version: 1.0.1

# @gitgw/use-scroll
React Hook to get X/Y coordinates of current position of the scroll.

## Installation
### npm
```npm i @gitgw/use-scroll```

### yarn
```yarn add @gitgw/use-scroll```

## Usage
```javascript
import React from "react";
import useScroll from "@gitgw/use-scroll";

function App() {

  const {x, y} = useScroll();
  console.log(x, y);

  return (
    <div className="App"></div>
  );
}
```

### 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: @gitgw/use-title
Description: React Hook to update your document's title.
Author: GW
Latest version: 1.1.0

# @gitgw/use-title

React Hook to update your document's title.

## Installation

### npm

```
npm i @gitgw/use-title
```

### yarn

```
yarn add @gitgw/use-title
```

## Usage

```javascript
import React from "react";
import useTitle from "@gitgw/use-title";

function App() {
  useTitle("Hello");
  
  return (
    <div className="App"></div>
  );
}
```

### Arguments

Argument|Type|Description|Required|
|-|-|-|-|
|title|String|The title you want to use on your document|yes