{"id":16513714,"url":"https://github.com/nitin42/react-marker","last_synced_at":"2025-03-21T08:31:30.258Z","repository":{"id":87330547,"uuid":"121608610","full_name":"nitin42/react-marker","owner":"nitin42","description":"🖍️ Highlight keywords and add colors to your text.","archived":false,"fork":false,"pushed_at":"2018-02-19T07:17:22.000Z","size":54,"stargazers_count":47,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T23:03:00.177Z","etag":null,"topics":["colors","crayons","highlight","markdown","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-02-15T09:00:17.000Z","updated_at":"2025-02-11T15:50:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"0bac3fe1-cfbb-4ae7-8ff8-b5d19847c4b6","html_url":"https://github.com/nitin42/react-marker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-marker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244765111,"owners_count":20506761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["colors","crayons","highlight","markdown","react"],"created_at":"2024-10-11T16:10:00.740Z","updated_at":"2025-03-21T08:31:30.239Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-marker\n![size-label](https://img.shields.io/badge/size-13.5%20KB-green.svg)\n\n\u003e 🖍️ \u0026nbsp;Highlight keywords and add colors to your text\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/e171708aae97bb29344b7ff712038166.png\" /\u003e\n\u003c/p\u003e\n\n## Install\n\n```\nnpm install react-marker\n```\n\nThis package also depends on React, so make sure you've already installed it.\n\n## Demo\n\n![demo](http://g.recordit.co/9cuduzjMYr.gif)\n\n## Usage\n\n**Highlighting keywords**\n\nTo highlight keywords automatically in your text, use `Keywords` component. Here is an example -\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport {Keywords} from 'react-marker'\n\nconst TEXT = `\nBuild encapsulated components that manage their own state, then compose them to make complex UIs.\n\nSince component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.\n`\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cKeywords\n        text={TEXT}\n        maxKeywords={8}\n        color=\"mistyrose\"\n      /\u003e\n    )\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('container'))\n```\n\nThis then renders to -\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/95d3cf49238a1c020230d541fdaf81ab.png\" /\u003e\n\u003c/p\u003e\n\n**Highlight the text with different colors**\n\n\u003e This was inspired by [Titus Wormer's](http://wooorm.com) work\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport {Highlight} from 'react-marker'\n\nconst TEXT = `\nBuild encapsulated components that manage their own state, then compose them to make complex UIs.\n\nSince component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.\n`\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cHighlight text={TEXT} /\u003e\n    )\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('container'))\n```\n\nThis renders to -\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/d27007ba53ff2076144b9655a1854778.png\" /\u003e\n\u003c/p\u003e\n\nAnother example -\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/923a4720cc0e64837b2f00145b33b815.png\" /\u003e\n\u003c/p\u003e\n\n## API\n\n`react-marker` exposes only two components, `Highlight` and `Keywords`.\n\n### Components\n\n* #### Keywords\n\nHighlight keywords in your text.\n\n| Props        | Default value           | Description  |\n| ------------- |:-------------:| -----:|\n| `text`    | \"\" | Text paragraph |\n| `maxKeywords`   | 5      |   Max. no of keywords to highlight |\n| `color` | `hsl(60, 91%, 83%)`      |    Color used to highlight the keywords |\n\n* #### Highlight\n\nHighlight your text with different hue range.\n\n| Props        | Default value          | Description  |\n| ------------- |:-------------:| -----:|\n| `text`    | \"\" | Text paragraph |\n\n## TODO\n\n- [ ] Gatsby plugin\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-marker/lists"}