{"id":21190105,"url":"https://github.com/reactiumcore/markdown-to-jsx","last_synced_at":"2025-07-06T23:34:17.100Z","repository":{"id":230454318,"uuid":"779420386","full_name":"ReactiumCore/markdown-to-jsx","owner":"ReactiumCore","description":"Component that takes plain text markdown and parses it into JSX","archived":false,"fork":false,"pushed_at":"2024-03-31T11:13:36.000Z","size":566,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-21T10:18:13.153Z","etag":null,"topics":[],"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/ReactiumCore.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}},"created_at":"2024-03-29T19:54:45.000Z","updated_at":"2024-03-29T20:56:04.000Z","dependencies_parsed_at":"2024-03-29T21:15:21.317Z","dependency_job_id":"dfec5460-6ddc-4655-a36b-2220e29e9ce1","html_url":"https://github.com/ReactiumCore/markdown-to-jsx","commit_stats":null,"previous_names":["reactiumcore/markdown-to-jsx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fmarkdown-to-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fmarkdown-to-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fmarkdown-to-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fmarkdown-to-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReactiumCore","download_url":"https://codeload.github.com/ReactiumCore/markdown-to-jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243646539,"owners_count":20324583,"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":[],"created_at":"2024-11-20T18:59:27.162Z","updated_at":"2025-03-14T20:44:14.495Z","avatar_url":"https://github.com/ReactiumCore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Component that takes plain text markdown and parses it into JSX.\n\n## Install\n\n```\nnpm install --save @atomic-reactor/markdown-to-jsx\n```\n\n## Usage\n\n```\nimport React, { useMemo } from 'react';\nimport { MarkdownJSX } from '@atomic-reactor/markdown-to-jsx';\n\nconst MyComponent = () =\u003e {\n    const markdownText = useMemo(() =\u003e (`\n        something\n\n        # Page Heading\n\n        - List Item 1\n        - List Item 2\n        - List item 3\n\n        Some other stuffs\n    `), []);\n\n    return \u003cMarkdownJSX value={markdownText} /\u003e\n};\n```\n\n## Properties\n\n| Property           | Type       | Description                                                                  | Default |\n| ------------------ | ---------- | ---------------------------------------------------------------------------- | ------- |\n| value              | `String`   | **Required.** The plain-text to be parsed to JSX                             |         |\n| className          | `String`   | Space-delimited classes to add to wrapper (ignored if renderInWrapper=false) |         |\n| renderInWrapper    | `Boolean`  | If true, the HTML output will have a \u003cdiv\u003e wrapper                           | `false` |\n| renderUnrecognized | `Function` | Unrecognized tags are rendered via this method                               |         |\n\n## Static Properties\n\n| Property               | Type       | Description                                                                         |\n| ---------------------- | ---------- | ----------------------------------------------------------------------------------- |\n| MarkdownJSX.preparsers | `Registry` | Registry of string replacers to apply before the value has been converted to markup |\n| MarkdownJSX.replacers  | `Registry` | Registry of string replacers to apply after the value has been converted to markup  |\n\n\u003e **Note:** _The preparsers and replacers registries are identical in functionality._\n\n#### MarkdownJSX.preparsers\n\nBy default the preparsers registry is empty. Registered string replacers are applied before the value has been converted to markup. This can be useful for validating or preformatting the input text.\n\n```\nMarkdownJSX.preparsers.register('something', {\n    match: /something/gim,\n    replace: 'Somethings',\n});\n```\n\n#### MarkdownJSX.replacers\n\nBy default the replacers registry is empty. Registered string replacers are applied after the value has been converted to markup. This can be useful for customizing the markup with inline styling or class names as well as modifying which tags are being used for specific markup.\n\n\u003e **Note:** _The initial generated markup will never had any attributes applied to the elements._\n\n```\nMarkdownJSX.replacers.register('heading', {\n    match: /\u003ch([1-6])\u003e(.+)\u003c\\/h[1-6]\u003e/gim,\n    replace: '\u003ch$1\u003e\u003cspan\u003e$2\u003c/span\u003e\u003c/h$1\u003e',\n});\n```\n\n##### Replace as a function\n\nYou can pass a function as the replace value to gain more control over the output of a preparser or replacer.\n\n```\nMarkdownJSX.replacers.register('heading', {\n    match: /\u003ch([1-6])\u003e(.+)\u003c\\/h[1-6]\u003e/gim,\n    replace: (...args) =\u003e {\n        const [, tag, text] = args;\n        const id = String(text).replace(/\\W/g, '-').toLowerCase();\n        return `\n        \u003ch${tag} id='${id}'\u003e\n            \u003ca href='#${id}'\u003e\n                ${text}\n            \u003c/a\u003e\n        \u003c/h${tag}\u003e\n    `;\n    },\n});\n```\n\n#### Removing A Registered Parsers\n\nYou can remove any registered preparser or replacer.\n\n```\n// Remove a single parser\nMarkdownJSX.replacers.unregister('heading');\n\n// Remove multiple parsers\nMarkdownJSX.replacers\n    .unregister('heading')\n    .unregister('foobar');\n\n// Remove all parsers\nMarkdownJSX.replacers.flush();\n\n```\n\n#### Replacing A Registered Parser\n\nYou can overwrite any registered preparser or replacer. The last in, first out rule is applied on the registry.\n\n```\n// input:\n// Something is fooed!\n\nMarkdownJSX.preparsers.register('foo', {\n    match: / foo/gi,\n    replace: ' fubar'\n});\n\nMarkdownJSX.preparsers.register('foo', {\n    match: / foo/gi,\n    replace: ' foobar'\n});\n\n// output:\n// Something is foobared!\n```\n\n#### Protect A Registered Parser\n\nYou can ensure that a parser isn't unregistered or replaced by adding it to the protected list.\n\n```\n// create and protect the 'heading' replacer\nMarkdownJSX.replacers\n    .register('heading', {\n        match: /\u003ch([1-6])\u003e(.+)\u003c\\/h[1-6]\u003e/gim,\n        replace: '\u003ch$1\u003e\u003cspan\u003e$2\u003c/span\u003e\u003c/h$1\u003e',\n    })\n    .protect('heading');\n\n// try to unregister the 'heading' replacer\nMarkdownJSX.replacers.unregister('heading');\n\n// Is it gone? Nope!\nconsole.log('Gone?', !MarkdownJSX.replacers.get('heading'));\n\n// unprotect the 'heading' replacer and unregister it\nMarkdownJSX.replacers.unprotect('heading').unregister('heading');\n\n// Is it gone now? Yep!\nconsole.log('Gone?', !MarkdownJSX.replacers.get('heading'));\n```\n\n## MarkdownJSXParser()\n\nIf you need to parse markdown without rendering it you can import MarkdownJSXParser.\n\n```\nimport { MarkdownJSXParser } from @atomic-reactor/markdown-to-jsx\n\nconst markdown = MarkdownJSXParser('# Something');\n\nconsole.log(markdown);\n\n// output:\n// \u003ch1\u003eSomething\u003c/h1\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactiumcore%2Fmarkdown-to-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactiumcore%2Fmarkdown-to-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactiumcore%2Fmarkdown-to-jsx/lists"}