# ant-open-rare-words-input

> # 使用须知 生僻字录入一直是困扰生僻字用户的一个问题，现有的输入法对生僻字输入的支持度参差不齐，比如搜狗输入可以通过 U+h 横、s 竖、p 撇、n 捺、z 折的笔画输入生僻字。 ![image.png](https://mdn.alipayobjects.com/huamei_2fq7mt/afts/img/A*z76QQ6VIbKMAAAAAAAAAAAAADh58AQ/original) 在各大输入法厂商普遍支持生僻字输入法之前，我们能提供了一个支持多样化输入模式、适配多端的生僻字输入组件，嵌入在

Latest version **0.0.5** (published 2023-08-29) · 0 weekly downloads

## Install

```sh
npm install ant-open-rare-words-input
pnpm add ant-open-rare-words-input
yarn add ant-open-rare-words-input
bun add ant-open-rare-words-input
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-08-29 |
| First published | 2023-08-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.0.0 |
| Dependencies | 0 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xingying |
| Maintainers | andyliwr |

## Links

- npm: https://www.npmjs.com/package/ant-open-rare-words-input
- npm.io page: https://npm.io/package/ant-open-rare-words-input

## Recent versions

- 0.0.5 (latest) — 2023-08-29
- 0.0.4 — 2023-08-29
- 0.0.3 — 2023-08-29
- 0.0.2 — 2023-08-29
- 0.0.1 — 2023-08-29

## README

# 生僻字输入组件开放版本

# 使用须知
生僻字录入一直是困扰生僻字用户的一个问题，现有的输入法对生僻字输入的支持度参差不齐，比如搜狗输入可以通过 U+h 横、s 竖、p 撇、n 捺、z 折的笔画输入生僻字。
![image.png](https://mdn.alipayobjects.com/huamei_2fq7mt/afts/img/A*z76QQ6VIbKMAAAAAAAAAAAAADh58AQ/original)
在各大输入法厂商普遍支持生僻字输入法之前，我们能提供了一个支持多样化输入模式、适配多端的生僻字输入组件，嵌入在页面里，以帮助用户在各种场景准确地输入生僻字。

![image.png](https://mdn.alipayobjects.com/huamei_2fq7mt/afts/img/A*bY5rTYGLpeAAAAAAAAAAAAAADh58AQ/original)
一些示例：

- [手机端输入组件示例](https://rare-words-solution-doc.alipay.com/input/mobile#%E7%A4%BA%E4%BE%8B)
- [PC 端输入组件示例](https://rare-words-solution-doc.alipay.com/input/mobile#%E7%A4%BA%E4%BE%8B)
- [支付宝小程序输入组件示例](https://mini.ant.design/components/rare-words-keyboard/)

> 使用开放版组件之前需要登录[ 支付宝开放平台 ](https://open.alipay.com)，创建 **小程序应用** 或** 网页/移动应用**。创建应用后，在 **开发** > **产品绑定** > **绑定产品**，添加 **蚂蚁Z字库生僻字**。
**说明：**生成的应用唯一标识 APPID 可用于调用开放产品接口。

> 了解产品的更多信息或寻求技术支持，可搜索 “姓名生僻字交流群”群的钉钉群号： 8960045480 加入官方答疑钉钉群。


## 时序图
输入过程的时序图：
![](https://mdn.alipayobjects.com/huamei_2fq7mt/afts/img/A*RHdtS6Duwl8AAAAAAAAAAAAADh58AQ/original)
字库更新机制时序图：
![](https://mdn.alipayobjects.com/huamei_2fq7mt/afts/img/A*6CWySKKeGPAAAAAAAAAAAAAADh58AQ/original)

# 接入输入组件（目前只支持手机端React组件）
在手机端，我们提供了一个虚拟的生僻字输入键盘，在用户需要输入生僻字的时候可以唤起这个键盘，通过输入生僻字的拼音或者拆字检索到想要输入的生僻字。
## 用法
### npm 包方式引用
#### 安装工具包
```shell
npm install ant-open-rare-words-input --save
```
#### 在页面初始化的逻辑里执行字体加载代码
```javascript
/**
 * 打开生僻字输入组件
 */
const handleOpen = () => {
  setVisible(true);
};

/**
 * 监听输入事件
 */
const handleChange = (e) => {
  const value = e.target.value;
  setValue(value);
};

/**
 * 输入框
 */
<input
  className="input"
  type="text"
  value={value}
  onChange={handleChange}
/>

/**
 * 提示信息
 */
<span className='tips' onClick={handleOpen}>录入生僻字</span>

/**
 * 生僻字输入组件
 */
<RareWordsInput
  visible={visible}
  type="pinyin"
  onFinish={(curValue) => {
    setValue(value => value + curValue);
  }}
/>;
```
### CDN 方式引入
在一些没有使用 webpack 此类打包工具的业务中，无法做到使用 npm 包，可以在 html 内通过引入 cdn script 链接的方式加载生僻字键盘组件
> **！！！** 这里注意的是此键盘组件基于 React 运行的，并且没有内置 React 库，如果你的系统也没有引入 React 相关的 script，请记得在此之前先引入：

```html
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.production.min.js" crossorigin></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" crossorigin></script>
```
示例代码：
```html
<div id="app"></div>
<script src="https://gw.alipayobjects.com/os/lib/alipay/open-rare-words-input/1.0.0/dist/index.umd.min.js" crossorigin></script>
<script>
  const domNode = document.getElementById('app');
  const root = ReactDOM.createRoot(domNode);
  const { openRareWordsInput } = window;
  root.render(React.createElement(openRareWordsInput, { visible: true, openAppId: 'xxx' }));
</script>
```

## 参数说明
| **参数** | **类型** | 是否必选 | **说明** |
| --- | --- | --- | --- |
| **visible** | boolean | 是 | 是否可见 |
| **type** | string | 是 | 键盘类型, pinyin（拼音）、split
（拆字）、handwriting（手写），目前只支持拼音和拆字 |
| openAppId | string | 是 | 创建应用时生成的应用唯一标识 APPID  |
| **stopPropagation** | string[] | 否 | 阻止某些事件的冒泡，默认阻止 click 事件 |
| **destroyOnClose** | boolean | 否 | 组件不可见时卸载内容 |
| **forceRender** | boolean | 否 | 无论组件是隐藏或者显示，都会强制性的将组件渲染到 DOM 中 |
| **showMask** | boolean | 否 | 是否展示蒙层，默认展示 |
| **onClose** | () => void | 否 | 关闭的时候触发的回调 |
| **onFinish** | (value: string, word: object) => void | 否 | 输入完成的时候触发的回调 |
| **onShow** | () => void | 否 | 打开的时候触发的回调 |
| **onError** | (err) => void | 否 | 组件调用失败的时候的回调 |
| **onReady** | (fontUrl, fontFace) => void | 否 | 组件准备好的时候的回调 |

---
_Source: https://npm.io/package/ant-open-rare-words-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._