open-index/open-npm huggingface dataset:
npm package: @21x37/discord-bot
Description: Easily setup discord bots with some customization!
Author: Tyler Mok
Latest version: 1.0.0

# @21x37/discord-bot
Easily setup a discord bot with this npm module! 🕹️

# Install
```
npm install @21x37/discord-bot
```

# Usage
```js
const discordBot = require('@21x37/discord-bot');

const options ={
    token: 
    isModerating,
    isGreeting,
    emotes
};
```
### Token is the discord token received from https://discordapp.com/developers/applications
```js
const token = process.env.DISCORD_TOKEN
```

### isModerating is a boolean, true or false. If you want the bot to have !kick and !ban commands.
```js
const isModerating = true;
```
In discord
```
!kick @username
```

### isGreeting is a object with possibly three properties.
* Boolean is if the greeting is active or not.
* Message is the message you want displayed when a person joins the channel. The username if the new user will immediately be added to the end of the string.
* Channel is the channel name of where you want the greeting to be.

```js
const isGreeting = { boolean: true, message: 'Welcome!', 'general' };
```
### Emotes is an ARRAY of objects where each object will have the command and a url to the image.

```js
const emotes = [
  { command: '!foo', url: 'https://www.bar.com/thevalueofbar.jpg' }
]
```
### To start the bot.
```js
const bot = new discordBot(options);
bot.start();
```

# Example

```js
const discordBot = require('@21x37/discord-bot');

const options = {
    token: process.env.DISCORD_TOKEN,
    isModerating: true,
    isGreeting: { active: true, message: 'Welcome to our server!', channelName: 'general' },
    emotes: [{ command: '!pepeHands', url: 'https://i.kym-cdn.com/entries/icons/original/000/025/382/Screen_Shot_2018-02-06_at_3.37.14_PM.png' }],
}

const bot = new discordBot(options);

bot.start();
```
Then just node your file in the cli.
```
node discordBot.js
```
npm package: @232003894/h5plus
Description: HTML5+ App for Vue.js
Author: cwb
Latest version: 0.9.1
Deprecated: new-package[@h5plus/core]

# h5plus

[![](https://img.shields.io/npm/l/@232003894/h5plus.svg?style=flat-square)](https://www.npmjs.com/package/@232003894/h5plus) [![](https://img.shields.io/npm/v/@232003894/h5plus.svg?style=flat-square)](https://www.npmjs.com/package/@232003894/h5plus) [![](https://img.shields.io/npm/dm/@232003894/h5plus.svg?style=flat-square)](https://www.npmjs.com/package/@232003894/h5plus) [![](https://img.shields.io/npm/dt/@232003894/h5plus.svg?style=flat-square)](https://www.npmjs.com/package/h5pa-vue)

> `HTML5+ App for Vue.js`

## 安装

```bash
npm install @232003984/h5plus

yarn add @232003984/h5plus
```

## 基本使用

```javascript
import Vue from 'vue'
import plus from '@232003984/h5plus'
Vue.use(plus)
```

### 组件选项

> `其方法中的this指向组件`

#### - event 选项

`Events模块管理客户端事件，包括系统事件，如扩展API加载完毕、程序前后台切换等。`

1.  "plusready": 扩展 API 加载完成事件
1.  "pause": 运行环境从前台切换到后台事件
1.  "resume": 运行环境从后台切换到前台事件
1.  "netchange": 设备网络状态变化事件
1.  "newintent": 新意图事件
1.  "plusscrollbottom": 窗口滚动到底部事件
1.  "error": 页面加载错误事件
1.  "background": 应用切换到后台运行事件
1.  "foreground": 应用切换到前台运行事件
1.  "trimmemory": 应用需要清理内存事件
1.  "splashclosed": 应用启动界面已关闭事件

#### - listener 选项

`用于监听自定义的事件广播`

#### $api [查看]{@link $api}

> `全局window中扩展$api，包含常用api，与设备无关的`

#### $plus [查看]{@link $plus}

> `全局window中扩展$plus，包含设备相关的api`

### 示例

```javascript
export default {
  name: 'app',
  // Events模块管理客户端事件，包括系统事件，如扩展API加载完毕、程序前后台切换等。
  // "plusready": 扩展API加载完成事件
  // "pause": 运行环境从前台切换到后台事件
  // "resume": 运行环境从后台切换到前台事件
  // "netchange": 设备网络状态变化事件
  // "newintent": 新意图事件
  // "plusscrollbottom": 窗口滚动到底部事件
  // "error": 页面加载错误事件
  // "background": 应用切换到后台运行事件
  // "foreground": 应用切换到前台运行事件
  // "trimmemory": 应用需要清理内存事件
  // "splashclosed": 应用启动界面已关闭事件
  event: {
    // plusready，设备加载完成
    plusready() {
      console.log('test组件 设备加载完成')
    }
  },
  // 自定义窗体监听选项
  listener: {
    // “customEvent”为事件名称
    customEvent(e) {
      // e.detail：事件传递的数据
      alert('test:' + JSON.stringify(e.detail))
    }
  },
  methods: {
    // 广播消息
    send: function() {
      this.plus.send('customEvent', { a: 1 }, { self: true })
    }
  }
}
```

## 自定义扩展

```javascript
import Vue from 'vue'
import plus from 'h5pa-vue'
Vue.use(plus, {
  // 全局指定hbuild的错误页地址
  errorPage: '/error.html',
  // 是否需要模拟
  isSim: true
})
```

## 参考

- [Vue2 中文](https://cn.vuejs.org/v2/guide/index.html)
- [html5plus](http://www.html5plus.org/doc/h5p.html)
npm package: @2345mfe/ocform-v3-mcp
Description: ocform-v3 MCP server
Author: zhangkai
Latest version: 1.0.0

# 私有组件 MCP 工具接入指南

## 简介

私有组件 MCP 工具是一个基于 Model Context Protocol (MCP) 协议的组件代码生成服务，通过与 Dify AI 平台集成，支持文本和图像输入的组件代码生成。

## 接入方式

### 方式一：stdio标准输入输出

**前置条件**
- 已安装 Node.js 环境（版本号 >= 18，推荐最新的 LTS 版本）
- 任意一个支持 MCP 的 IDE：
  - Cursor
  - VSCode + Cline 插件
  - 其它

**macOS/Linux配置**
```json
{
    "mcpServers": {
        "私有组件": {
            "name": "私有组件代码生成 MCP 工具",
            "description": "生成组件代码的工具，基于 MCP 协议",
            "command": "npx",
            "args": [
                "-y",
                "@2345mfe/private-component-mcp@latest"
            ],
            "env": {
                "API_KEY": "xx"
            }
        }
    }
}
```

**Windows配置**
```json
{
    "mcpServers": {
        "私有组件": {
            "name": "私有组件代码生成 MCP 工具",
            "description": "生成组件代码的工具，基于 MCP 协议",
            "command": "cmd",
            "args": [
                "/c",
                "npx",
                "-y",
                "@2345mfe/private-component-mcp@latest"
            ],
            "env": {
                "API_KEY": "xx"
            }
        }
    }
}
```

### 方式二：本地部署

克隆项目并在本地运行服务

```bash
# 拉取仓库
git clone git@gitlab.2345.cn:ued/fee/private-component-codegen-mcp.git

# 安装依赖
yarn

# 启动服务
yarn start:sse:dev
```

**Cursor mcp.json配置**
```json
{
    "mcpServers": {
        "私有组件": {
            "url": "http://localhost:3000/sse",
            "enabled": true,
            "forceUrl": true
        }
    }
}
```

### 方式三：SSE远程服务

仅需在 mcp.json 中配置即可接入远程服务

```json
{
    "mcpServers": {
        "私有组件": {
            "url": "http://ai.ued.2345.cn/sse",
            "enabled": true,
            "forceUrl": true
        }
    }
}
```

## 功能特点

- **AI 驱动生成**：基于大模型的智能代码生成，通过自然语言描述快速创建高质量前端组件
- **实时流式响应**：采用SSE技术提供流式响应，保证AI生成内容的即时反馈
- **MCP协议支持**：完整支持模型上下文协议，实现AI与开发环境的深度融合
- **多模态输入**：支持图像和文本的多模态输入，能够从设计图或参考UI直接生成代码实现

## 项目结构

```
src/
├── index.ts           # 标准 MCP 服务器入口文件（stdio）
├── sse-server.ts      # SSE MCP 服务器入口文件（Web API）
├── dify-command-tool.ts # 命令行工具入口文件
├── static/           # 静态资源目录
└── tools/            # 工具库
```

## API端点

- `GET /` - Web 界面首页
- `GET /health` - 健康检查端点，返回 `{"status": "ok"}`
- `GET /sse` - 建立 SSE 连接
- `POST /messages` - 向 SSE 连接发送消息

## 使用流程

1. **建立连接**：通过SSE协议连接到服务器，建立实时通信通道
2. **发送请求**：描述需要生成的组件或上传UI设计图像
3. **接收生成**：实时获取AI生成的组件代码
4. **集成应用**：将生成的组件集成到您的前端项目中

## 开发指南

### 环境要求

- Node.js >= 18
- TypeScript
- 安装依赖：`yarn` 或 `npm install`

### 启动命令

```bash
# 启动标准 MCP 服务器
yarn start:dev

# 启动 SSE 服务器
yarn start:sse:dev

# 启动命令行工具
yarn cli:dev
```

### 构建命令

```bash
# 开发构建
yarn build

# 生产构建（包含代码压缩）
yarn build:prod
```
npm package: @2372233634gm/toast-notify
Description: A simple toast notification library
Author: 2372233634gm
Latest version: 1.0.0

# Toast Notify

A lightweight, customizable toast notification library for web applications.

## Installation

```bash
npm install @2372233634gm/toast-notify
```

or

```bash
yarn add @2372233634gm/toast-notify
```

## Usage

### Basic Usage

```javascript
import { Toast } from '@2372233634gm/toast-notify';

// Show different types of notifications
Toast.success('Operation completed successfully!');
Toast.error('An error occurred!');
Toast.warning('Warning: This action cannot be undone.');
Toast.info('Server maintenance scheduled for tonight.');

// Or use the generic show method
Toast.show('Custom message', 'info');
```

### Customization

```javascript
// Set global default options
Toast.setDefaultOptions({
  duration: 5000,
  position: 'top-center',
  showCloseButton: true
});

// Customize individual toast
Toast.success('Custom toast', {
  duration: 10000, // 10 seconds
  position: 'bottom-right',
  showCloseButton: true,
  className: 'my-custom-toast',
  style: {
    fontSize: '16px',
    borderLeft: '4px solid #4caf50'
  },
  onClick: () => {
    console.log('Toast clicked');
  },
  onClose: () => {
    console.log('Toast closed');
  }
});
```

## API

### Toast Types

- `success`: Green toast for successful operations
- `error`: Red toast for errors
- `warning`: Orange toast for warnings
- `info`: Blue toast for information (default)

### Methods

- `Toast.show(message, type, options)`: Show a toast with the specified type
- `Toast.success(message, options)`: Show a success toast
- `Toast.error(message, options)`: Show an error toast
- `Toast.warning(message, options)`: Show a warning toast
- `Toast.info(message, options)`: Show an info toast
- `Toast.setDefaultOptions(options)`: Set global default options for all toasts

### Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `duration` | number | 3000 | Duration in milliseconds (0 for no auto-close) |
| `position` | string | 'top-right' | Position of the toast on the screen |
| `showCloseButton` | boolean | true | Whether to show the close button |
| `className` | string | undefined | Additional CSS class name |
| `style` | object | undefined | Custom inline styles |
| `onClick` | function | undefined | Callback when toast is clicked |
| `onClose` | function | undefined | Callback when toast is closed |

### Positions

- `top-left`
- `top-center`
- `top-right` (default)
- `bottom-left`
- `bottom-center`
- `bottom-right`

## License

MIT
npm package: @23jmo/claude-sync
Description: Sync skills, plugins, and extensions between Claude Code and Claude Desktop
Latest version: 1.0.0

# claude-sync

Sync skills, plugins, and extensions between Claude Code and Claude Desktop.

## Installation

Run directly without installing:

```bash
bunx claude-sync
```

Or install globally:

```bash
bun install -g claude-sync
```

## Features

- **Bidirectional sync**: Choose to sync Code → Desktop or Desktop → Code
- **Format transformation**: Automatically converts between Claude Code skills/plugins and Desktop DXT extensions
- **MCP server sync**: Syncs MCP server configurations between both apps
- **Registry lookup**: Checks for official DXT extensions before converting locally
- **Interactive UI**: Beautiful CLI with checkboxes for selecting what to sync
- **Diff preview**: Shows what changed since the last sync
- **Auto-backup**: Creates timestamped backups before every sync
- **Rollback**: Restore from any previous backup

## Usage

Simply run:

```bash
bunx claude-sync
```

You'll see an interactive menu:

```
┌  claude-sync v1.0.0
│
◆  What would you like to do?
│  ● Sync Code → Desktop
│  ○ Sync Desktop → Code
│  ○ View sync status
│  ○ View history / Rollback
│  ○ Exit
└
```

### Sync Flow

1. Select sync direction
2. Review changes (new, modified, removed items)
3. Select items to sync with checkboxes
4. Confirm sync
5. Backup is automatically created
6. Items are synced

### What Gets Synced

| Claude Code | → | Claude Desktop |
|-------------|---|----------------|
| Skills (`~/.claude/skills/`) | → | DXT Extensions |
| Plugins | → | DXT Extensions (or registry install) |
| MCP Servers | ↔ | MCP Servers |

| Claude Desktop | → | Claude Code |
|----------------|---|-------------|
| DXT Extensions | → | Skills + MCP config |
| MCP Servers | ↔ | MCP Servers |

### Incompatible Items

Some Claude Code features don't have Desktop equivalents and will be skipped:
- Skills using subagents
- Skills using hooks
- Custom agent definitions

You'll see a warning for any skipped items.

## Data Storage

Sync data is stored in `~/.claude-sync/`:

```
~/.claude-sync/
├── manifest.json      # Sync state and history
├── backups/           # Timestamped backups
│   └── 2024-02-03T19-45-00/
│       ├── claude-code/
│       └── claude-desktop/
└── converted/         # Generated artifacts
```

## Development

```bash
# Clone and install
git clone <repo>
cd claude-sync
bun install

# Run in development
bun run dev

# Build for distribution
bun run build
```

## License

MIT
npm package: @247grad/system-text-json-refs
Description: Parses System.Text.Json references
Author: Lukas Härtel
Latest version: 1.0.1

# About

Parses JSON produced by .Net System.Text.Json serialization with [reference preservation](https://learn.microsoft.com/en-us/dotnet/standard/serialization/system-text-json/preserve-references).

# Install

```shell
npm i @247grad/system-text-json-refs
```

# Use

Import from package and parse a given JSON string.

```typescript
import { parseWithRefs } from "@247grad/system-text-json-refs"

const parsed = parseWithRefs(text);
```
npm package: @24consulting/audi_ui
Description: Audi UI inspired bootstrap theme
Author: 24/CO
Latest version: 1.0.33
Deprecated: this package is no longer mantained

# audi-ui-bootstrap

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```
npm package: @24hr/progressive-loadable
Description: React Component to used with react-loadable to prohgressevly hydrate.
Author: Camilo Tapia
Latest version: 1.0.8

# ProgressiveLoadable

This helps you progressively load and hydrate components when they are in the viewport. It should be used together with [react-loadable](https://www.npmjs.com/package/react-loadable)
to enable code splitting.

Code splitting and progressive hydration are extremly effective tricks to downsize the first chunks of javascript you load in the browser, but still 
showing the correct content the user loads into the browser (with server side rendering).

So instead of just server side render and then hydrate everything, 
you render everything on the server, then hydrate the parst that are visible and wait with everything that is outside the viewport until the user scrolls. 
When your component is visible, you load the chunks and hydrate the last part.


## How to use

A normal ```react-loadable``` is loaded like this

```javascript

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});
 
export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}
```

With ProgressiveLoadable you only need to change it like this:

```javascript

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

// THIS IS THE EXTRA WRAPPER
const ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent);
 
export default class App extends React.Component {
  render() {
    return <ProgressiveLoadable/>; // THIS IS CHANGED AS WELL
  }
}

```

If you want to change the default threshold (default is ```.3```, ie 30% of the component needs to be visible), you just send it as options:

```javascript

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

const ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent, { threshold: .5 });
 
export default class App extends React.Component {
  render() {
    return <ProgressiveLoadable/>;
  }
}

```

## Other info

This uses the IntersectionObserver, which doesnt exists in ie 11. In ie 11, or other browsers without the IntersectionObserver, it will just assume the component
is in the viewport.
npm package: @24hr/react-hooks
Description: react hooks
Author: Tina Håkansson
Latest version: 1.2.2

# @24hr/react-hooks
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
![Build](https://github.com/24hr-malmo/react-hooks/workflows/24HR%20React%20Hooks/badge.svg?branch=master&style=flat-square&label=build)

React hooks library

## Documentation

### useBeforeMount
A hook that runs before mount and is suitable for SSR.
```js
useBeforeMount(() =>
    console.log('Runs only once before component mounts. Works on the server!')
)
```

### useLocalStorage
A hook that syncs state with localstorage
```js
/**
 * @typedef Options
 * @property {boolean} [clearOnUnmount] - Whether or not to clear the localstorage value on unmount.
 */

/**
 * A hook that syncs the state with a property in the localstorage.
 * @param {string} defaultVal - The initial value
 * @param {string} key - Mandatory key to use to store the data in localstorage.
 * @param {Options} options - Options object
 * @return {[any, function, function]} - Return the current state, a set state function and a function to clear the storage.
 */
const [state, setState, clear] = useLocalStorage('default value', 'key', { clearOnUnmount: false });
```

# Want to contribute?

It's easy to contribute!

1. Clone the repo and create a new branch from master.

2. Make your changes.

3. Run `./bump.sh` and choose if your changes are major, minor och patch.

4. Commit and push.

5. Make a merge request to master. The CI pipeline will publish your new version to NPM!

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://www.marcusthelin.com"><img src="https://avatars1.githubusercontent.com/u/22647302?v=4" width="100px;" alt=""/><br /><sub><b>Marcus Thelin</b></sub></a><br /><a href="https://github.com/24hr-malmo/react-hooks/commits?author=marcusthelin" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/schmolie"><img src="https://avatars0.githubusercontent.com/u/17004998?v=4" width="100px;" alt=""/><br /><sub><b>schmolie</b></sub></a><br /><a href="https://github.com/24hr-malmo/react-hooks/commits?author=schmolie" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
npm package: @24hr/react-structured-data
Description: A React component to render structured data
Author: Marcus Thelin
Latest version: 1.0.2

# @24hr/react-structured-data

This is a simple React component to render a script tag as type `application/ld+json`. This can be used to create structured data for Google search according to the [Schema.org](https://schema.org) definition.

## How to use

1. Import the module

```jsx
import StructuredData from '@24hr/react-structured-data';
```

2. Use it

```jsx
<StructuredData type={structureDataType} {...structuredDataObject} />
```

## Props - General

| Prop    |       Type        |      Default       |
|---------|:-----------------:|:------------------:|
| context |      string       | https://schema.org |
| type    | string (required) |     undefined      |

You can then pass it whatever structured data compatible objects as you want. These are just passed along.

## Props - FAQPage component
| Prop      |       Type       | Default |
|-----------|:----------------:|:-------:|
| questions | array (required) |         |

A question object should have the structure:
```js
{
    question: String,
    answer: String
}
```

## Example - FAQ Page

Import the built-in FAQPage component
```jsx
import React from 'react';
import { FAQPage } from '@24hr/react-structured-data';

const App = () => (
    <div>
        {/* Your content */}
        <FAQPage
            questions={[
                {
                    question: 'Test',
                    answer: 'Okey'
                }
            ]}
        />
    </div>
);
```
npm package: @24letters/agent-images
Description: CLI for uploading immutable images to GH Agent Images Hoster.
Latest version: 0.1.3

# @24letters/agent-images

CLI for uploading immutable images to GH Agent Images Hoster.

## Install

```sh
pnpm add -g @24letters/agent-images
```

## Usage

```sh
agent-images auth login --api <service-origin> --token <cli-token> --agent <default-agent-name>
```

```sh
agent-images upload <file-path> --agent <agent-name> [--alt "alt text"]
```

The `upload` command prints markdown you can paste into GitHub pull requests.

## Install the Agent Skill

```sh
agent-images install-skill
```

This delegates to [skills.sh](https://skills.sh/) and installs the `gh-agent-images-upload` skill from this repository.
npm package: @24letters/devservers-daemon
Description: Fastify daemon for Devservers Manager.
Latest version: 0.4.0

# Devservers Manager Daemon

Fastify daemon that manages tmux windows and serves the Devservers Manager UI.

Typically installed as a dependency of `@24letters/devservers`.

Manual start (advanced):

```
node dist/index.js --config /path/to/devservers.json --port 4141
```

UI:

```
http://127.0.0.1:4141/ui/
```
npm package: @24min/fanui
Description: 基于Vue2.x的个人UI组件库
Author: 24min
Latest version: 0.1.6

<!--
 * @Author: 24min
 * @Date: 2020-04-14 20:43:16
 * @LastEditors: 24min
 * @LastEditTime: 2020-04-27 11:29:17
 * @Description: file content
 -->
# FanUI
components of vue2.x
一些组件的功能以及样式综合参考了优秀的一些开源UI框架，比如`elementui`,`antd`。

# 更新日志

- 2020.4.27：更新button组件
npm package: @253eosam/aut-api-request
Description: teamreboott aut FE에서 사용하는 axios wrapping한 API request
Author: Sungjun Lee
Latest version: 0.0.6

# @teamreboott/AUT-apiRequest

> 사내 프로젝트에서 사용.

AUT 제품의 API의 규칙적인 응답 form과 baskUrl, 세부 설정들을 wrapping한 apiRequest package입니다.
npm package: @27-lanterns/use-steps
Description: A custom react hook to control ui/wizard/page stages or steps
Author: Evgenii Astapushkin
Latest version: 1.0.3

# use-steps

A custom [React](https://reactjs.de) hook to control ui/wizard/page stages or steps.

Supports circular and sequential transitions.

### Installation

```console
npm i @27-lanterns/use-steps
```

### Params

| Param | type     | Optional? | Default value | Description                                                                              |
|------|----------|-----------|---------------|------------------------------------------------------------------------------------------|
| stepsList | `T[]`    | No        | -             | An array of available steps to go through                                                |
| isCircular | `boolean` | Yes       | `false`       | Are controls circular (i.e. you go to the first step after the last one and vice versa)? |

### Usage

```tsx
import React, { FC } from 'react';
import useSteps from '@27-lanterns/use-steps';

const availableSteps: string[] = ['Opening', 'Intermission', 'Ending'];
const altrenateSteps: string[] = ['Intro', 'Culmination', 'Credits'];

const SomeWizardComponent: FC = () => {
	const [isCircular, setIsCircular] = useState(false);
	const [currentStep, nextStep, previousStep, setStep, hasStep, setAvailableSteps] = useSteps({
		stepsList: availableSteps,
		isCircular
	});
	
	const toggleCircular = () => setIsCircular(!isCircular);

	return <>
        <article>
            <h2>{currentStep}</h2>
            <p>Has intermission? {hasStep(availableSteps[1]) ? 'Yes' : 'No'}</p>
        </article>
        <button onClick={previousStep}>Previous</button>
        <button onClick={nextStep}>Next</button>
        <button onClick={() => setStep(availableSteps[2])}>FastForward</button>
        <button onClick={() => setAvailableSteps(altrenateSteps)}>Change steps</button>
        <button onClick={toggleCircular}>Toggle circular mode</button>
    </>;
};
```