{"id":28339209,"url":"https://github.com/shiyangzhaoa/react-text-maker","last_synced_at":"2026-05-02T01:34:28.000Z","repository":{"id":292563596,"uuid":"977998514","full_name":"shiyangzhaoa/react-text-maker","owner":"shiyangzhaoa","description":"A React component for text highlighting and annotation","archived":false,"fork":false,"pushed_at":"2025-05-28T03:32:32.000Z","size":132,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-02T01:34:24.211Z","etag":null,"topics":["annotate","component","highlight","react"],"latest_commit_sha":null,"homepage":"https://shiyangzhaoa.github.io/react-text-maker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shiyangzhaoa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-05T10:06:08.000Z","updated_at":"2026-03-23T22:12:34.000Z","dependencies_parsed_at":"2025-05-28T04:52:17.241Z","dependency_job_id":"7ab667df-5cd3-449e-a802-2597cd7e4aa1","html_url":"https://github.com/shiyangzhaoa/react-text-maker","commit_stats":null,"previous_names":["shiyangzhaoa/react-text-maker","shiyangzhaoa/react-text-marker"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/shiyangzhaoa/react-text-maker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiyangzhaoa%2Freact-text-maker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiyangzhaoa%2Freact-text-maker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiyangzhaoa%2Freact-text-maker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiyangzhaoa%2Freact-text-maker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shiyangzhaoa","download_url":"https://codeload.github.com/shiyangzhaoa/react-text-maker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiyangzhaoa%2Freact-text-maker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32520156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"ssl_error","status_checked_at":"2026-05-02T01:12:54.261Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annotate","component","highlight","react"],"created_at":"2025-05-27T01:21:21.584Z","updated_at":"2026-05-02T01:34:27.985Z","avatar_url":"https://github.com/shiyangzhaoa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Text Marker\n\nEnglish | [简体中文](README.zh-CN.md)\n\nA React component for text highlighting and annotation with customizable themes and interactive features.\n\n\u003cp\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/shiyangzhaoa/react-text-maker/130be7a481f79713293fa6b98570b29868c0176d/logo.svg\" alt=\"Tailwind Tool\"\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-text-maker\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-text-maker?style=flat-square\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-text-maker\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-text-maker?style=flat-square\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/shiyangzhaoa/react-text-maker/blob/main/LICENSE\"\u003e\u003cimg src=\"https://shields.io/github/license/shiyangzhaoa/react-text-maker?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🎨 Customizable highlight colors and themes\n- 🖱️ Interactive text selection and highlighting\n- ⌨️ Keyboard shortcuts support (Delete/Backspace to remove highlights)\n- 🎯 Multiple highlight support with nested ranges\n- 📱 Responsive design\n- 🧪 Comprehensive test coverage\n- 🔍 Customizable hint display\n- 🎭 Theme-based highlighting\n- ⚡ Real-time highlight updates\n\n## Installation\n\n```bash\n# Using npm\nnpm install react-text-maker\n\n# Using yarn\nyarn add react-text-maker\n\n# Using pnpm\npnpm add react-text-maker\n```\n\n## Usage\n\n```tsx\nimport { ReactTextMaker } from 'react-text-maker';\nimport 'react-text-maker/dist/style.css';\n\nfunction App() {\n  const [highlights, setHighlights] = useState([]);\n\n  return (\n    \u003cReactTextMaker\n      text=\"Your text content here\"\n      hint=\"annotation\"\n      onChange={setHighlights}\n      onMarkClick={(ids) =\u003e console.log('Clicked highlights:', ids)}\n      onMarkAdd={(item) =\u003e console.log('Added highlight:', item)}\n      onMarkRemove={(items) =\u003e console.log('Removed highlights:', items)}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| text | string | required | The text content to be highlighted |\n| hint | string | required | The hint text to be displayed with highlights |\n| value | HighlightItem[] | [] | Array of highlight items |\n| onChange | (items: HighlightItem[]) =\u003e void | - | Callback when highlights change |\n| onMarkClick | (ids: string[]) =\u003e void | - | Callback when a highlight is clicked |\n| onMarkAdd | (item: HighlightItem) =\u003e void | - | Callback when a highlight is added |\n| onMarkRemove | (items: HighlightItem[]) =\u003e void \\| boolean | - | Callback when highlights are removed |\n| disabled | boolean | false | Whether the component is disabled |\n| className | string | - | Additional CSS class name |\n| style | React.CSSProperties | - | Additional inline styles |\n| theme | (string \\| { hint: string; color?: string })[] | DEFAULT_THEME | Array of color codes or theme objects for highlights |\n| maxCount | number | - | Maximum number of highlights allowed |\n| hintStyle | React.CSSProperties | - | Custom styles for hint text |\n\n## HighlightItem Type\n\n```typescript\ninterface HighlightItem {\n  id: string;           // Unique identifier for the highlight\n  text: string;         // The highlighted text content\n  hint: string;         // The hint text to display\n  range: [number, number]; // Start and end indices of the highlight\n  color: [number, number, number];       // rgb\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Run tests\npnpm test\n\n# Run tests with coverage\npnpm test:coverage\n\n# Run tests with UI\npnpm test:ui\n\n# Build\npnpm build\n\n# Lint\npnpm lint\n\n# Lint with auto-fix\npnpm lint:fix\n```\n\n## Testing\n\nThe project uses Vitest and React Testing Library for testing. Run the following commands:\n\n```bash\n# Run tests\npnpm test\n\n# Run tests with coverage\npnpm test:coverage\n\n# Run tests with UI\npnpm test:ui\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiyangzhaoa%2Freact-text-maker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshiyangzhaoa%2Freact-text-maker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiyangzhaoa%2Freact-text-maker/lists"}