open-index/open-npm huggingface dataset:
npm package: @hochun836/mini-package
Description: as small as possible
Author: hochun836
Latest version: 0.0.6

# mini-package

this is a package as small as possible

## How to create your mini-package

```cmd
mkdir mini-package && cd mini-package
npm init --scope=@your-scope
echo console.log("Hello World"); > index.js
node index.js // for test
notepad README.md // write some information
```

## How to publish your mini-package

```cmd
npm login
npm whoami // for test
npm publish --access public
```

- if this package isn't published first time (without a git repository)

```cmd
npm version <major | minor | patch>
npm publish
```

- if this package isn't published first time (with a git repository)

```cmd
git add .
git commit -m "<your-message>"
git log --oneline --all --graph // for check
npm version <major | minor | patch> // it will create a version commit and tag
git log --oneline --all --graph // for check
git push --follow-tags // push commits and tags
npm publish
```

## How to unpublish your mini-package

```cmd
npm unpublish @your-scope/mini-package -f
```
npm package: @hoci/components
Description: [English](README.md) | 中文
Author: Chizuki
Latest version: 1.0.0

# @hoci/components

[English](README.md) | 中文

基于 [@hoci/core](../core/README.zh-CN.md) 无样式基础逻辑的 Vue 3 组件封装。适用于需要即用型组件、统一命名（`Hi*` / `hi-*`）以及一次 `install()` 全局注册的场景。

> **💡 推荐：** 大多数场景下，我们推荐使用 **hoci** 主包，而不是直接安装 `@hoci/components`。**hoci** 包提供了统一的入口，包含组件、组合式函数和自动导入解析器（`HociResolver`）。

## 安装

```sh
pnpm add @hoci/components
```

**依赖要求：** Vue 3.3+、[@vueuse/core](https://vueuse.org/) 10.5+。

**内部依赖：** [@hoci/core](../core/README.zh-CN.md)、[@hoci/shared](../shared/README.zh-CN.md)。

## 组件列表

| 组件 | 说明 | 主要特性 |
|------|------|----------|
| **HiAffix** | 滚动时将内容固定在视口或目标元素 | 支持顶部/底部定位、自定义偏移量、滚动容器 |
| **HiAffixTarget** | Affix 定位的目标元素 | 为 affix 组件提供上下文 |
| **HiConfigProvider** | 全局配置提供者 | 设置默认图标配置、子组件的激活事件 |
| **HiFileUpload** | 支持拖拽的文件上传 | 单选/多选文件、文件校验 |
| **HiIcon** | 图标封装组件 | 尺寸、颜色、遮罩支持，灵活的图标源 |
| **HiItem** | 可选项列表项 | 与 HiSelection 配合使用，支持自定义标签 |
| **HiPopover** | 可控制位置的浮动面板 | 多种位置、触发事件（点击、悬停等）、传送支持 |
| **HiSelection** | 单选/多选容器 | 支持单选/多选、自定义类名、可清除 |
| **HiSwitch** | 开关切换组件 | 布尔状态、激活/非激活类名、禁用状态 |
| **HiTabs** | 标签页容器组件 | 标签切换逻辑，与 HiTabPane 配合使用 |
| **HiTabPane** | 单个标签页面板 | 在 HiTabs 容器内使用 |
| **HiVirtualList** | 大列表虚拟滚动 | 高效渲染、滚动处理、可自定义项大小 |

## 使用方式

### 完整导入

如果不太在意打包体积，完整导入更方便。

```ts
import * as HociComponents from "@hoci/components";
// main.ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.use(HociComponents);
app.mount("#app");
```

### 手动导入

```ts
import {
  HiAffix,
  HiAffixTarget,
  HiConfigProvider,
  HiFileUpload,
  HiIcon,
  HiItem,
  HiPopover,
  HiSelection,
  HiSwitch,
  HiTabPane,
  HiTabs,
  HiVirtualList,
} from "@hoci/components";
```

## 许可

MIT
npm package: @hoci/core
Description: [English](README.md) | 中文
Author: Chizuki
Latest version: 1.0.0

# @hoci/core

[English](README.md) | 中文

[hoci](../hoci/README.zh-CN.md) 的核心组合式函数、props、emits 与类型。**不提供 Vue 组件** — 即用型组件请使用 [@hoci/components](../components/README.zh-CN.md)。基于 Vue 3 与 [@vueuse/core](https://vueuse.org/)。

> **💡 推荐：** 大多数场景下，我们推荐使用 **hoci** 主包，而不是直接安装 `@hoci/core`。**hoci** 包提供了统一的入口，包含组件、组合式函数和自动导入解析器。

## 安装

```sh
pnpm add @hoci/core
```

**依赖要求：** Vue 3.3+、[@vueuse/core](https://vueuse.org/) 10.5+。

## 组合式函数 API

| 组合式函数 | 返回值 | 说明 |
|------------|--------|------|
| **useAffix** | `{ className, wrapperRef, isFixed, placeholderStyle, fixedStyle, updatePosition }` | 滚动时将内容固定在视口或目标。返回固定状态、样式和引用。 |
| **useFileUpload** | `{ inputRef, files, handleChange, handleDrop, handleDragOver }` | 支持拖拽的文件上传。返回文件列表和处理函数。 |
| **useIcon** | `{ style }` | 图标逻辑（尺寸、颜色、遮罩）。返回计算后的样式。 |
| **useSelectionItem** | `{ isActive, activate, reject, className }` | 可选项逻辑。返回激活状态和处理函数。 |
| **usePopover** | `{ visible, show, close, popupRef, triggerRef, placement, offset }` | 可控制位置的浮动面板。返回可见性状态和引用。 |
| **useSelectionList** | `{ options, actives, isActive, changeActive, renderItem, render }` | 单选/多选状态管理。返回选择状态和渲染函数。 |
| **useSelectionContext** | `HiSelectionContext` | 从父级 HiSelection 注入选择上下文。返回包含 activate、isActive 等的上下文。 |
| **useSwitch** | `{ toggle, modelValue, className, isDisabled, activateEvent }` | 开关逻辑。返回状态和切换处理函数。 |
| **useVirtualList** | `{ virtualizer, scrollToIndex, scrollToOffset }` | 大列表虚拟滚动。返回虚拟化实例和滚动方法。 |

## Props 与 Emits

| 模块 | Props | Emits | 说明 |
|------|-------|-------|------|
| **Affix** | `affixProps` | `affixEmits` | 固定定位属性（offset、position、target、zIndex）和事件（scroll、change） |
| **ConfigProvider** | `configProviderProps` | - | 全局配置属性（icon、activateEvent） |
| **FileUpload** | `fileUploadProps` | `fileUploadEmits` | 文件选择属性（modelValue、multiple）和事件（update:modelValue、change） |
| **Icon** | `iconProps` | - | 图标属性（src、size、width、height、color、mask） |
| **Item** | `itemProps` | `itemEmits` | 选择项属性（value、disabled）和事件（reject） |
| **Popover** | `popoverProps` | `popoverEmits` | 浮动面板属性（placement、triggerEvent、offset、visible）和事件（update:visible、change） |
| **Selection** | `selectionProps` | `selectionEmits` | 选择属性（modelValue、multiple、activeClass、itemClass）和事件（update:modelValue、change） |
| **Switch** | `switchProps` | `switchEmits` | 开关属性（modelValue、activeClass、disabled）和事件（update:modelValue、change、reject） |
| **VirtualList** | `virtualListProps` | `virtualListEmits` | 虚拟列表属性（count、estimateSize、options）和事件（scroll、scrollStart、scrollEnd） |

## 工具函数

| 导出 | 说明 |
|------|------|
| **provideAffixTarget** | 为子组件提供 affix 目标元素 |
| **AFFIX_TARGET_KEY** | Affix 目标上下文的注入键 |

类型、组合式函数（如 `useShowable`）与工具由 [@hoci/shared](../shared/README.zh-CN.md) 重新导出。

## 使用方式

基于组合式函数进行二次组件开发；若需要现成 Vue 组件，请使用 **@hoci/components** 或 **hoci**。

```ts
import { selectionEmits, selectionProps, useSelectionList } from "@hoci/core";

// 在你自己的组件中使用
const { isActive, changeActive, render } = useSelectionList(props, { emit, slots });
```

## 许可

MIT
npm package: @hoci/shared
Description: [English](README.md) | 中文
Author: Chizuki
Latest version: 1.0.0

# @hoci/shared

[English](README.md) | 中文

[hoci](../hoci/README.zh-CN.md) 生态共用的类型、组合式函数与工具。被 [@hoci/core](../core/README.zh-CN.md) 与 [@hoci/components](../components/README.zh-CN.md) 使用；一般通过 **hoci** 或 **@hoci/core** 间接使用，无需直接依赖本包。

## 安装

```sh
pnpm add @hoci/shared
```

**依赖要求：** Vue 3.3+、[@vueuse/core](https://vueuse.org/) 10.5+。

## 内容概览

| 类别 | 说明 |
|------|------|
| **Composables** | 如 `useShowable` — 弹窗、气泡等开关状态与回调。 |
| **Provides** | 配置与依赖注入辅助。 |
| **Types** | `HookComponent`、`Showable`、`ShowableStatus`、`ActivateEvent`、`ElementLike` 等共享类型。 |
| **Utils** | 数组、DOM、类型判断（`is`）、RAF 等工具。 |
| **Constants** | 共享常量。 |
| **define** | 定义组件或选项的辅助。 |

## 使用方式

```ts
import type { Showable, ShowableStatus } from "@hoci/shared";
import { useShowable } from "@hoci/shared";
```

多数场景请使用 **hoci** 或 **@hoci/core**；仅在需要底层类型或组合式且不想引入组件时再直接依赖 **@hoci/shared**。

## 许可

MIT
npm package: @hocinemk/easyfetch
Description: a library that will help test APIS
Author: hocinemk
Latest version: 1.0.4

# EasyFetch

EasyFetch is a lightweight, promise-based HTTP client for Node.js, similar to Axios. It simplifies making HTTP requests and handling responses. For now it only support REST APIS but i am planning to add more as we go.

## Features
- Lightweight and easy to use
- Supports GET, POST, PUT, DELETE, PATCH
- Timeout handling
- Custom headers

## Installation
```bash
npm install @hocinemk/easyfetch
npm package: @hocs/debounce-handler
Description: Debounce handler HOC for React and React Native
Author: Kir Belevich
Latest version: 0.5.0

# :hourglass: debounce-handler

[![npm](https://img.shields.io/npm/v/@hocs/debounce-handler.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/debounce-handler) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/debounce-handler&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/debounce-handler)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Helps to debounce handlers like `onChange`.

## Install

```
yarn add @hocs/debounce-handler
```

## Usage

```js
debounceHandler(
  handlerName: string,
  delay?: number|function<props>,
  leadingCall?: boolean
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import debounceHandler from '@hocs/debounce-handler';

const Demo = ({ count, onButtonClick, label }) => (
  <div className='demo'>
    {label || ''}
    <h1>{count}</h1>
    <button onClick={onButtonClick}>CLICK ME FAST</button>
  </div>
)

const Demo1 = compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
  }),
  debounceHandler('onButtonClick', 300)
)(Demo)

const Demo2 = compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
  }),
  debounceHandler('onButtonClick', (props) => props.debounce || 0)
)(Demo)

const MainDemo = () => (
  <div>
    <style>
      {
        `.demo {
          margin-bottom: 10px;
          border-style: dotted;
          border-radius: 10px;
          padding: 5px;
        }`
      }
    </style>
    <Demo1 label='Delay as argument' />
    <Demo2 label='Delay from props' debounce={300} />
    <Demo2 label='No delay (zero by default)' />
  </div>
)

export default MainDemo
```

:tv: [Check out live demo](https://codesandbox.io/s/qlmk8mlvk4).
npm package: @hocs/omit-props
Description: Omit props HOC for React and React Native
Author: Kir Belevich
Latest version: 0.4.0

# :non-potable_water: omit-props

[![npm](https://img.shields.io/npm/v/@hocs/omit-props.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/omit-props) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/omit-props&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/omit-props)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Helps to omit unnecessary context prop, state setters or anything else you don't want to propagate and `{...spread}` to Component.

## Install

```
yarn add @hocs/omit-props
```

## Usage

```js
omitProps(
  ...props: Array<string>
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withProps } from 'recompose';
import omitProps from '@hocs/omit-props';

const Demo = (props) => (
  <h1>props: {JSON.stringify(props)}</h1>
  // props: {"c":3}
);

export default compose(
  withProps({ a: 1, b: 2, c: 3 }),
  omitProps('a', 'b')
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/6jyxnnoorr).
npm package: @hocs/prevent-handlers-default
Description: Prevent handlers default HOC for React and React Native
Author: Kir Belevich
Latest version: 0.4.0

# :no_entry: prevent-handlers-default

[![npm](https://img.shields.io/npm/v/@hocs/prevent-handlers-default.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/prevent-handlers-default) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/prevent-handlers-default&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/prevent-handlers-default)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Decouples [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) side effect from handlers like form submitting or clicking a link.

## Install

```
yarn add @hocs/prevent-handlers-default
```

## Usage

```js
preventHandlersDefault(
  ...handlers: Array<string>
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import preventHandlersDefault from '@hocs/prevent-handlers-default';

const submitAction = (value) => console.log(`Submit: ${value}`);

const Demo = ({ value, onChange, onSubmit }) => (
  <form onSubmit={onSubmit}>
    <input value={value} onChange={onChange}/>
    <button>Submit</button>
  </form>
);

export default compose(
  withState('value', 'setValue', ''),
  withHandlers({
    onChange: ({ setValue }) => (e) => setValue(e.target.value),
    onSubmit: ({ value }) => () => submitAction(value)
  }),
  preventHandlersDefault('onSubmit')
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/x7xkvo02v4).
npm package: @hocs/throttle-handler
Description: Throttle handler HOC for React and React Native
Author: Kir Belevich
Latest version: 0.5.0

# :hourglass: throttle-handler

[![npm](https://img.shields.io/npm/v/@hocs/throttle-handler.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/throttle-handler) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/throttle-handler&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/throttle-handler)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Helps to throttle handlers like `onChange`.

## Install

```
yarn add @hocs/throttle-handler
```

## Usage

```js
throttleHandler(
  handlerName: string,
  interval?: number|function<props>,
  leadingCall?: boolean
): HigherOrderComponent
```

```js
const Demo = ({ count, onButtonClick, label }) => (
  <div className='demo'>
    {label || ''}
    <h1>{count}</h1>
    <button onClick={onButtonClick}>CLICK ME FAST</button>
  </div>
)

const Demo1 = compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
  }),
  throttleHandler('onButtonClick', 1000)
)(Demo)

const Demo2 = compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
  }),
  throttleHandler('onButtonClick', (props) => props.throttle || 0)
)(Demo)

const MainDemo = () => (
  <div>
    <style>
      {
        `.demo {
          margin-bottom: 10px;
          border-style: dotted;
          border-radius: 10px;
          padding: 5px;
        }`
      }
    </style>
    <Demo1 label='Delay as argument' />
    <Demo2 label='Delay from props' throttle={300} />
    <Demo2 label='No delay (zero by default)' />
  </div>
)

export default MainDemo
```

:tv: [Check out live demo](https://codesandbox.io/s/q96856wkow).
npm package: @hocs/with-callback-on-change
Description: Invokes a callback on prop change as a HOC for React and React Native
Author: Kir Belevich
Latest version: 0.3.1

# :bell: with-callback-on-change

[![npm](https://img.shields.io/npm/v/@hocs/with-callback-on-change.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-callback-on-change) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-callback-on-change&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-callback-on-change)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Invokes a callback on prop change, useful to decouple side effects like `onChange` handler in a declarative way.

## Install

```
yarn add @hocs/with-callback-on-change
```

## Usage

```js
withCallbackOnChange(
  propName: string,
  callback: (props: Object) => void
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import withCallbackOnChange from '@hocs/with-callback-on-change';

const Demo = ({ count, onButtonClick }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={onButtonClick}>increment</button>
  </div>
);

export default compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ setCount, count }) => () => setCount(count + 1)
  }),
  withCallbackOnChange('count', ({ count }) => console.log(count))
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/o8m03w7j6).
npm package: @hocs/with-callback-on-change-while
Description: Invokes a callback on prop change while condition is true as a HOC for React and React Native
Author: Kir Belevich
Latest version: 0.3.0

# :bell: with-callback-on-change-while

[![npm](https://img.shields.io/npm/v/@hocs/with-callback-on-change-while.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-callback-on-change-while) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-callback-on-change-while&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-callback-on-change-while)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Invokes a callback on prop change while condition is true, useful to decouple side effects like `onChange` handler in a declarative way and control loops.

## Install

```
yarn add @hocs/with-callback-on-change-while
```

## Usage

```js
withCallbackOnChangeWhile(
  propName: string,
  shouldCall: (props: Object) => boolean,
  callback: (props: Object) => void
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import withCallbackOnChangeWhile from '@hocs/with-callback-on-change-while';

const Demo = ({ count, onButtonClick }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={onButtonClick}>increment</button>
  </div>
);

export default compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ setCount, count }) => () => setCount(count + 1)
  }),
  withCallbackOnChangeWhile(
    'count',
    ({ count }) => count <= 5,
    ({ count }) => console.log(count)
  )
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/23kkwykkln).
npm package: @hocs/with-callback-once
Description: Invokes a callback once condition is true as a HOC for React and React Native
Author: Kir Belevich
Latest version: 0.3.0

# :bell: with-callback-once

[![npm](https://img.shields.io/npm/v/@hocs/with-callback-once.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-callback-once) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-callback-once&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-callback-once)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Invokes a callback once condition is true (while previous check was false), useful to decouple side effects like `onSuccess` or `onError` handlers in a declarative way.

## Install

```
yarn add @hocs/with-callback-once
```

## Usage

```js
withCallbackOnce(
  shouldCall: (props: Object) => boolean,
  callback: (props: Object) => void
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import withCallbackOnChangeWhile from '@hocs/with-callback-on-change-while';
import withCallbackOnce from '@hocs/with-callback-once';

const Demo = ({ count, onButtonClick }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={onButtonClick}>decrement</button>
  </div>
);

export default compose(
  withState('count', 'setCount', 5),
  withHandlers({
    onButtonClick: ({ setCount, count }) => () => setCount(count - 1)
  }),
  withCallbackOnChangeWhile(
    'count',
    ({ count }) => count >= 0,
    ({ count }) => console.log(count)
  ),
  withCallbackOnce(
    ({ count }) => count === 0,
    () => console.log('done!')
  )
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/mz1nm8l93y).
npm package: @hocs/with-debugger
Description: Debugger HOC for React and React Native
Author: Kir Belevich
Latest version: 0.4.0

# :mag: with-debugger

[![npm](https://img.shields.io/npm/v/@hocs/with-debugger.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-debugger) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-debugger&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-debugger)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Injects `debugger` into render.

## Install

```
yarn add @hocs/with-debugger
```

## Usage

```js
withDebugger: HigherOrderComponent
```

```js
import React from 'react';
import { compose, withProps } from 'recompose';
import withDebugger from '@hocs/with-debugger';

const Demo = () => (
  <h1>Hi</h1>
);

export default compose(
  withProps({ a: 1, b: 2, c: 3 }),
  withDebugger
)(Demo);
```
npm package: @hocs/with-log
Description: Console log HOC for React and React Native
Author: Kir Belevich
Latest version: 0.5.0

# :mag: with-log

[![npm](https://img.shields.io/npm/v/@hocs/with-log.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-log) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-log&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-log)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Injects `console.log` with props or any custom message into render.

## Install

```
yarn add @hocs/with-log
```

## Usage

```js
withLog(
  getMessageToLog?: (props: Object) => any
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withProps } from 'recompose';
import withLog from '@hocs/with-log';

const Demo = () => (
  <h1>Hi</h1>
);

export default compose(
  withProps({ a: 1, b: 2, c: 3 }),
  withLog(({ a }) => `a = ${a}`)
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/pk7o259910).
npm package: @hocs/with-match-media-props
Description: CSS Media Queries HOC for React
Author: Kir Belevich
Latest version: 0.4.0

# :left_right_arrow: with-match-media-props

[![npm](https://img.shields.io/npm/v/@hocs/with-match-media-props.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-match-media-props) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-match-media-props&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-match-media-props)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Dynamically map [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) matches to boolean props using [`window.matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) ([Can I use?](https://caniuse.com/#search=matchmedia)).

## Install

```
yarn add @hocs/with-match-media-props
```

## Usage

```js
withMatchMediaProps(
  mediaMatchers: {
    [propName: string]: Object
  }
): HigherOrderComponent
```

Where media matcher value is [json2mq](https://github.com/akiran/json2mq) object.
```js
import React from 'react';
import withMatchMediaProps from '@hocs/with-match-media-props';

const Demo = (props) => (
  <h1>props: {JSON.stringify(props)}</h1>
  // props: {"isSmallScreen":false,"isRetina":true}
);

export default withMatchMediaProps({
  isSmallScreen: {
    maxWidth: 500
  },
  isHighDpiScreen: {
    minResolution: '192dpi'
  }
})(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/lpq4qr3o29).

## Notes

* You still might need a polyfill but I can't find any.
* Target Component will be just passed through on unsupported platforms (i.e. `global.matchMedia` is not a function) like IE9, JSDOM (so Jest as well) or with Server-Side Rendering. This means that there will be no boolean props (i.e. `undefined`) which might be expected, but you can take care of it using Recompose [`defaultProps`](https://github.com/acdlite/recompose/blob/master/docs/API.md#defaultprops) HOC if it's really necessary.
npm package: @hocs/with-online-status-props
Description: Online status HOC for React
Author: Kir Belevich
Latest version: 0.3.0

# :electric_plug: with-online-status-props

[![npm](https://img.shields.io/npm/v/@hocs/with-online-status-props.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-online-status-props) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-online-status-props&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-online-status-props)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Dynamically map online/offline status to props using [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine) ([Can I use?](https://caniuse.com/#feat=online-status)).

## Install

```
yarn add @hocs/with-online-status-props
```

## Usage

```js
withOnlineStatusProps(
  mapStatusToProps: (onlineStatus: Object) => Object,
): HigherOrderComponent
```

```js
import React from 'react';
import withOnlineStatusProps from '@hocs/with-online-status-props';

const Demo = (props) => (
  <h1>props: {JSON.stringify(props)}</h1>
);

export default withOnlineStatusProps(
  ({ isOnline, isOffline }) => ({ isOnline, isOffline })
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/2jx0x9r3rp).

## Notes

* Target Component will be just passed through on unsupported platforms (i.e. `global.navigator.onLine` is `undefined`) like with Server-Side Rendering. This means that there will be no status (i.e. `undefined`) which might be expected, but you can take care of it using Recompose [`defaultProps`](https://github.com/acdlite/recompose/blob/master/docs/API.md#defaultprops) HOC if it's really necessary.
npm package: @hocs/with-page-visibility-props
Description: Page Visibility HOC for React
Author: Kir Belevich
Latest version: 0.4.0

# :see_no_evil: with-page-visibility-props

[![npm](https://img.shields.io/npm/v/@hocs/with-page-visibility-props.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-page-visibility-props) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-page-visibility-props&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-page-visibility-props)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Dynamically map page visibility status to props using [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) ([Can I use?](https://caniuse.com/#feat=pagevisibility)).

> A few examples:
>
> * A site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page.
> * An application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible.
> * A page wants to detect when it is being prerendered so it can keep accurate count of page views.
> * A site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off)


## Install

```
yarn add @hocs/with-page-visibility-props
```

## Usage

```js
withPageVisibilityProps(
  mapStatusToProps: (visibilityStatus: Object) => Object,
): HigherOrderComponent
```

Where `visibilityStatus` is an `{ isVivisble, isHidden, isPrerendered, isUnloaded }` object, check out [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState) documentation for details.

```js
import React from 'react';
import { compose } from 'recompose';
import withPageVisibilityProps from '@hocs/with-page-visibility-props';
import withLog from '@hocs/with-log';

const Demo = () => (
  <h1>Switch to another tab, go back here and check console logs.</h1>
);

export default compose(
  withPageVisibilityProps(
    ({
      isVisible,
      isHidden,
      isPrerendered,
      isUnloaded
    }) => ({
      isVisible,
      isHidden,
      isPrerendered,
      isUnloaded
    })
  ),
  withLog()
)(Demo);
```

:tv: [Check out live demo](https://codesandbox.io/s/q7x0nvom24).

## Notes

* Target Component will be just passed through on unsupported platforms (i.e. `global.document.visibilityState` is `undefined`) like IE9, JSDOM (so Jest as well) or with Server-Side Rendering. This means that there will be no visibiulity status (i.e. `undefined`) which might be expected, but you can take care of it using Recompose [`defaultProps`](https://github.com/acdlite/recompose/blob/master/docs/API.md#defaultprops) HOC if it's really necessary.
npm package: @hocs/with-view-layout-props
Description: View layout dimensions HOC for React Native
Author: Kir Belevich
Latest version: 0.2.0

# :left_right_arrow: with-view-layout-props

[![npm](https://img.shields.io/npm/v/@hocs/with-view-layout-props.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-view-layout-props) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-view-layout-props&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-view-layout-props)

Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).

Dynamically map View layout dimensions to props using [`onLayout()`](https://facebook.github.io/react-native/docs/view.html#onlayout) handler.

## Install

```
yarn add @hocs/with-view-layout-props
```

## Usage

```js
withResizeObserverProps(
  mapStateToProps: (layoutDimensions: Object) => Object
  handlerName?: string
): HigherOrderComponent
```

Where:

* `layoutDimensions` – `{ width, height, x, y }`
* `handlerName` – in some cases you might want to change it. `'onlayout'` by default.

```js
import React from 'react';
import { View } from 'react-native';
import withViewLayoutProps from '@hocs/with-view-layout-props';

const Demo = ({ width, height, x, y, onLayout, ...props }) => (
  <View onLayout={onLayout} {...props}>
    { JSON.stringify({ width, height, x, y }) }
  </View>
);

export default withViewLayoutProps(
  ({ width, height, x, y }) => ({ width, height, x, y })
)(Demo);
```

## Related

* :left_right_arrow: [with-resize-observer-props](../with-resize-observer-props)
npm package: @hoctail/query
Description: Hoctail client-side query support
Author: Hoctail
Latest version: 1.4.0

# Welcome to @hoctail/query
[![Version](https://img.shields.io/npm/v/@hoctail/query.svg)](https://www.npmjs.com/package/@hoctail/query)
[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://hoctail.github.io/query/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/Hoctail/query/blob/master/LICENSE)

> Hoctail query client is a low level API for browser and nodejs.

### 🏠 [Homepage](https://github.com/hoctail/query)

## Install

```sh
yarn install @hoctail/query
```

## Examples

```js
import Client from '@hoctail/query'

const options = {
  baseURL: 'wss://api.hoctail.io', // Hoctail endpoint URL
  key: 'xxx-xxxx-xxxx-xxxxxxxxx', // your API key
  app: 'user@example.com/my-app', // your Hoctail app identifier
}
// create a client instance
// use `console.log()` as a default logger function
const client = new Client(options, console.log)

// run an SQL query on server
client.query('select * from users').then(console.log)

// call a public stored procedure on server
client.call('public.whoami').then(console.log)

// run a function in a server context
client.wait(() => {
  return `Hello ${hoc.userName}`
}).then(console.log)

// run an async function in a server context
// that fetches from a remote API
client.wait(async () => {
  const fetch = require('node-fetch')
  const res = await fetch('https://reqres.in/api/users/2')
  return await res.json()
}).then(console.log)
```

See [the docs](https://hoctail.github.io/hoctail/) for a complete API documentation

## Author

👤 **Hoctail**

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/Hoctail/query/issues).
npm package: @hocuspocus/extension-rocksdb
Description: hocuspocus persistence driver for RocksDB
Latest version: 1.0.0-alpha.105
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @hocuspocus/extension-rocksdb
[![Version](https://img.shields.io/npm/v/@hocuspocus/extension-rocksdb.svg?label=version)](https://www.npmjs.com/package/@hocuspocus/extension-rocksdb)
[![Downloads](https://img.shields.io/npm/dm/@hocuspocus/extension-rocksdb.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
[![License](https://img.shields.io/npm/l/@hocuspocus/extension-rocksdb.svg)](https://www.npmjs.com/package/@hocuspocus/extension-rocksdb)
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)

## Introduction
hocuspocus is an opinionated collaborative editing backend for [tiptap](https://github.com/ueberdosis/tiptap) – based on [Y.js](https://github.com/yjs/yjs), a CRDT framework with a powerful abstraction of shared data.

## Offical Documentation
Documentation can be found in the [GitHub repository](https://github.com/ueberdosis/hocuspocus).

## License
hocuspocus is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/hocuspocus/blob/main/LICENSE.md).