文本标注功能在教育、数据分析、内容管理等领域中变得越来越重要。为了帮助开发者更轻松地实现这一功能,我写了这个 Annotation-React
库。这个库可以让你在 React 应用中轻松地对文章或段落中的单词或句子进行划线打标。
功能目前较简单,一张gif就能演示完成如下:
快速开始
安装
首先,你需要通过 npm 或 yarn 安装 Annotation-React
库:
bash
npm install annotation-react
或
bash
yarn add annotation-react
使用示例
以下是一个简单的使用示例,展示了如何在 React 应用中使用 Annotation-React
库对文本进行标注。
typescript
import React from "react";
import { Annotation } from "annotation-react";
import { createRoot } from "react-dom/client";
import "annotation-react/dist/style.css";
createRoot(document.getElementById("app")!).render(
<Annotation
onChange={(annos) => {
console.log({ annos });
}}
tags={[{ content: "error" }, { content: "success" }]}
sentence="A story is a component with a set of arguments that define how the component should render."
/>
);
export default App;
参数说明
sentence
:需要进行标注的文本内容。onChange
:标注完成后的回调函数,返回当前所有标注结果。tags
:自定义打标内容。
更多参数
typescript
export interface PAnnotation {
/** content to be showed */
sentence?: string;
tags?: TTag[];
/**the annotations that already exist */
annoations?: TAnnoDetail[];
/**the fontSize of main content,now only support number, will use px unit */
fontSize?: number;
/** Ensure that there is enough space between the rows to fit a tag */
lineHeight?: string;
/** the color of marked text by annotation */
hightlightColor?: string;
hightlightBgColor?: string;
/** can not mark */
readonly?: boolean;
/** notify when annotations add or remove */
onChange?: (annoations: TAnnoDetail[]) => void;
}
目前项目刚发布第一个版本,有不足的地方希望大家多提pr