https://github.com/shiyangzhaoa/react-text-maker
A React component for text highlighting and annotation
https://github.com/shiyangzhaoa/react-text-maker
annotate component highlight react
Last synced: 28 days ago
JSON representation
A React component for text highlighting and annotation
- Host: GitHub
- URL: https://github.com/shiyangzhaoa/react-text-maker
- Owner: shiyangzhaoa
- License: mit
- Created: 2025-05-05T10:06:08.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-28T03:32:32.000Z (about 1 year ago)
- Last Synced: 2026-05-02T01:34:24.211Z (28 days ago)
- Topics: annotate, component, highlight, react
- Language: TypeScript
- Homepage: https://shiyangzhaoa.github.io/react-text-maker/
- Size: 129 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Text Marker
English | [็ฎไฝไธญๆ](README.zh-CN.md)
A React component for text highlighting and annotation with customizable themes and interactive features.
## Features
- ๐จ Customizable highlight colors and themes
- ๐ฑ๏ธ Interactive text selection and highlighting
- โจ๏ธ Keyboard shortcuts support (Delete/Backspace to remove highlights)
- ๐ฏ Multiple highlight support with nested ranges
- ๐ฑ Responsive design
- ๐งช Comprehensive test coverage
- ๐ Customizable hint display
- ๐ญ Theme-based highlighting
- โก Real-time highlight updates
## Installation
```bash
# Using npm
npm install react-text-maker
# Using yarn
yarn add react-text-maker
# Using pnpm
pnpm add react-text-maker
```
## Usage
```tsx
import { ReactTextMaker } from 'react-text-maker';
import 'react-text-maker/dist/style.css';
function App() {
const [highlights, setHighlights] = useState([]);
return (
console.log('Clicked highlights:', ids)}
onMarkAdd={(item) => console.log('Added highlight:', item)}
onMarkRemove={(items) => console.log('Removed highlights:', items)}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| text | string | required | The text content to be highlighted |
| hint | string | required | The hint text to be displayed with highlights |
| value | HighlightItem[] | [] | Array of highlight items |
| onChange | (items: HighlightItem[]) => void | - | Callback when highlights change |
| onMarkClick | (ids: string[]) => void | - | Callback when a highlight is clicked |
| onMarkAdd | (item: HighlightItem) => void | - | Callback when a highlight is added |
| onMarkRemove | (items: HighlightItem[]) => void \| boolean | - | Callback when highlights are removed |
| disabled | boolean | false | Whether the component is disabled |
| className | string | - | Additional CSS class name |
| style | React.CSSProperties | - | Additional inline styles |
| theme | (string \| { hint: string; color?: string })[] | DEFAULT_THEME | Array of color codes or theme objects for highlights |
| maxCount | number | - | Maximum number of highlights allowed |
| hintStyle | React.CSSProperties | - | Custom styles for hint text |
## HighlightItem Type
```typescript
interface HighlightItem {
id: string; // Unique identifier for the highlight
text: string; // The highlighted text content
hint: string; // The hint text to display
range: [number, number]; // Start and end indices of the highlight
color: [number, number, number]; // rgb
}
```
## Development
```bash
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Run tests
pnpm test
# Run tests with coverage
pnpm test:coverage
# Run tests with UI
pnpm test:ui
# Build
pnpm build
# Lint
pnpm lint
# Lint with auto-fix
pnpm lint:fix
```
## Testing
The project uses Vitest and React Testing Library for testing. Run the following commands:
```bash
# Run tests
pnpm test
# Run tests with coverage
pnpm test:coverage
# Run tests with UI
pnpm test:ui
```
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
MIT