{"id":24826828,"url":"https://github.com/ljh131/mark-to-react","last_synced_at":"2026-01-31T08:31:17.679Z","repository":{"id":28448208,"uuid":"118406992","full_name":"ljh131/mark-to-react","owner":"ljh131","description":"Fully customizable markdown component in React","archived":false,"fork":false,"pushed_at":"2022-12-07T16:57:54.000Z","size":4666,"stargazers_count":2,"open_issues_count":15,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T11:08:15.104Z","etag":null,"topics":["jsonml","markdown","markdown-viewer","react"],"latest_commit_sha":null,"homepage":"","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/ljh131.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}},"created_at":"2018-01-22T04:39:20.000Z","updated_at":"2021-08-29T05:44:39.000Z","dependencies_parsed_at":"2022-08-07T13:15:53.052Z","dependency_job_id":null,"html_url":"https://github.com/ljh131/mark-to-react","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/ljh131/mark-to-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljh131%2Fmark-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljh131%2Fmark-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljh131%2Fmark-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljh131%2Fmark-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ljh131","download_url":"https://codeload.github.com/ljh131/mark-to-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljh131%2Fmark-to-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260927230,"owners_count":23083982,"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":["jsonml","markdown","markdown-viewer","react"],"created_at":"2025-01-30T21:21:41.496Z","updated_at":"2026-01-31T08:31:17.673Z","avatar_url":"https://github.com/ljh131.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mark-to-react\nFully customizable markdown component in React\n\n* Supports most common markdown specs and other extensions\n* Easy to make custom markdown syntax and component\n\n## If you want to find out markdown parser\n\n* [mark-to-jsonml](https://github.com/ljh131/mark-to-jsonml)\n\n# Live Demo\n[Click Here](https://ljh131.github.io/mark-to-react/)\n\n# Installation\n```sh\nnpm install mark-to-react --save\n```\n\n# Usage example\n## Basic usage\n```javascript\nimport React from 'react';\nimport Markdown from 'mark-to-react';\n\nconst md = `\n# hello mark-to-react!\n* first things first\n* the start is half\n`;\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cMarkdown text={md} /\u003e\n    );\n  }\n}\n```\n\n## How to add custom syntax and component\nOn the example below, syntax `@@@` and corresponding component are added for `custom horizontal ruler`.\n\nFor more information about custom syntax parser, take a look at [mark-to-jsonml](https://github.com/ljh131/mark-to-jsonml)\n\n``` javascript\nimport React from 'react';\nimport Markdown from 'mark-to-react';\nimport { Parser, makeTestResult } from 'mark-to-jsonml';\n\nconst md = `\n# hello mark-to-react!\n@@@\n`;\n\nconst customParser = new Parser({ parseToc: true });\n\nfunction parseMyHr(string, isTest) {\n  var HR = /^(@){3,}$/gm;\n  var result = HR.exec(string);\n\n  // you should return test result on test mode.\n  if(isTest) return makeTestResult(HR, result, -1);\n  if(!result) return null;\n\n  return ['my_hr'];\n}\n\ncustomParser.addBlockParser(parseMyHr, true);\n\nclass MyHr extends React.Component {\n  render() {\n    const { prop1, prop2 } = this.props;\n    return (\n      \u003cdiv style={{border: '1px solid #000'}}\u003e\n        I WANNA BE a HORIZONTAL RULER! {prop1} {prop2}\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass App extends React.Component {\n  render() {\n    const parsed = customParser.parse(md);\n    return (\n      \u003cMarkdown\n        parsed={parsed}\n        componentMap={{'my_hr': MyHr}} /\u003e\n    );\n  }\n}\n```\n\n## More example\nhttps://github.com/ljh131/mark-to-react/tree/master/src/demo\n\n# API\n## Component: Markdown\n### props\n* text {String}: Markdown text to render.\n* parsed {Object}: Parsed markdown JsonML. It priors to `text`.\n* componentMap {Object}: Object mapped markdown elements to React component.\n  * For example, `{'hr': MyHr}` will mapping `hr` markdown element to `MyHr` React component.\n* componentProps {Object}: Object mapped markdown elements to React props.\n  * For example, if it is set to `{'hr': {...props}}` and corresponding `hr` React component will receive those properties. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljh131%2Fmark-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fljh131%2Fmark-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljh131%2Fmark-to-react/lists"}