{"id":41511292,"url":"https://github.com/ydeshayes/react-highlight","last_synced_at":"2026-01-23T20:04:45.073Z","repository":{"id":37888486,"uuid":"70988371","full_name":"ydeshayes/react-highlight","owner":"ydeshayes","description":"ReactJS component that help you highlight ranges of text and give you callbacks to detect user selection.","archived":false,"fork":false,"pushed_at":"2023-03-15T02:15:42.000Z","size":3222,"stargazers_count":139,"open_issues_count":15,"forks_count":25,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-25T19:21:02.067Z","etag":null,"topics":["highlight-ranges","highlight-text","range","reactjs","reactjs-components"],"latest_commit_sha":null,"homepage":"https://ydeshayes.github.io/react-highlight/","language":"JavaScript","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/ydeshayes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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}},"created_at":"2016-10-15T13:07:45.000Z","updated_at":"2025-01-12T01:51:41.000Z","dependencies_parsed_at":"2024-06-18T17:09:24.368Z","dependency_job_id":"53d4a633-d9d7-4c6d-acbc-7a972007e58c","html_url":"https://github.com/ydeshayes/react-highlight","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ydeshayes/react-highlight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydeshayes%2Freact-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydeshayes%2Freact-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydeshayes%2Freact-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydeshayes%2Freact-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ydeshayes","download_url":"https://codeload.github.com/ydeshayes/react-highlight/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydeshayes%2Freact-highlight/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28699372,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"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":["highlight-ranges","highlight-text","range","reactjs","reactjs-components"],"created_at":"2026-01-23T20:04:44.314Z","updated_at":"2026-01-23T20:04:45.068Z","avatar_url":"https://github.com/ydeshayes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/ydeshayes/react-highlight.svg?branch=master)](https://travis-ci.org/ydeshayes/react-highlight)\n# Highlight component for ReactJS\n\nReactJS component that help you highlight ranges of text and give you callbacks to detect user text selection.\n\n## Installation\n\n```\n  npm install highlightable\n```\n\n## Features\n\n* Pass ranges and the component will highlight the text for you\n* Callback function that give you the start and end of the user highlited text\n* Customisable renderRange function that allow you to add tooltip on the top of user selection for exemple\n* Convert url string into link\n\n## Getting started\n\n\n```jsx\n\u003cHighlightable ranges={ranges}\n               enabled={true}\n               onTextHighlighted={onTextHighlightedCallback}\n               id={uniqueId}\n               onMouseOverHighlightedWord={onMouseOverHighlightedWordCallback}\n               highlightStyle={{\n                 backgroundColor: '#ffcc80'\n               }}\n               text={'text'}\n/\u003e\n```\n### Props:\n\n* **ranges** -\u003e array: of Range objects (see Range object below).\n\n* **text** -\u003e string: the all text that the user can highlight.\n\n* **enabled** -\u003e bool: The user can't highlight text if false.\n\n* **onMouseOverHighlightedWord** -\u003e func: Callback function when the user mouse is over an highlighted text.\n`(range) =\u003e {}`\n\n* **onTextHighlighted** -\u003e func: Callback function when the user highlight new text.\n`(range) =\u003e {}`\n\n* **highlightStyle** -\u003e obj: Style of the text when the text is highlighted. or func: \n`(range, charIndex) =\u003e {return style}`\n* **style** -\u003e obj: The style of the main div container\n\n* **rangeRenderer** -\u003e func: Use this function to customise the render of the highlighted text.\n`(currentRenderedNodes, currentRenderedRange, currentRenderedIndex, onMouseOverHighlightedWord) =\u003e {return node}`\n\n* **nodeRenderer** -\u003e func: Use this function to customise the render of the nodes.\n`(charIndex, range, text, url, isEmoji) =\u003e {return node}`\n\n### Range object:\n\nThe range object attributes:\n* **start** -\u003e int: the index of the character where the range start.\n* **end** -\u003e int: the index of the character where the range stop.\n* **text** -\u003e string: the highlighted text.\n* **data** -\u003e object: extra data (the props of the highlight component)\n\n## Development\n\n* `npm run build` - produces production version\n* `npm run dev` - produces development version\n* `npm test` - run the tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fydeshayes%2Freact-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fydeshayes%2Freact-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fydeshayes%2Freact-highlight/lists"}