{"id":27195389,"url":"https://github.com/gmsgowtham/react-native-marked","last_synced_at":"2025-05-15T12:05:09.920Z","repository":{"id":59007905,"uuid":"526848585","full_name":"gmsgowtham/react-native-marked","owner":"gmsgowtham","description":"Markdown renderer for React Native powered by marked.js","archived":false,"fork":false,"pushed_at":"2025-05-08T08:07:03.000Z","size":8771,"stargazers_count":240,"open_issues_count":23,"forks_count":22,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-08T09:23:15.280Z","etag":null,"topics":["markdown","marked-js","react","react-native","renderer","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-marked","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/gmsgowtham.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["gmsgowtham"],"custom":["https://www.buymeacoffee.com/gmsgowtham"]}},"created_at":"2022-08-20T06:45:23.000Z","updated_at":"2025-05-06T03:24:51.000Z","dependencies_parsed_at":"2023-09-24T09:27:57.150Z","dependency_job_id":"bba48888-bd03-4339-a31a-e22accda6424","html_url":"https://github.com/gmsgowtham/react-native-marked","commit_stats":{"total_commits":490,"total_committers":5,"mean_commits":98.0,"dds":0.4653061224489796,"last_synced_commit":"1ebfa7fcfd3b89292ac5bf2e32a4fa8ce38689e0"},"previous_names":[],"tags_count":83,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-marked","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-marked/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-marked/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-marked/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmsgowtham","download_url":"https://codeload.github.com/gmsgowtham/react-native-marked/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"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":["markdown","marked-js","react","react-native","renderer","typescript"],"created_at":"2025-04-09T19:45:45.285Z","updated_at":"2025-05-15T12:05:04.729Z","avatar_url":"https://github.com/gmsgowtham.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gmsgowtham","https://www.buymeacoffee.com/gmsgowtham"],"categories":[],"sub_categories":[],"readme":"# react-native-marked\n\n[![GitHub license](https://img.shields.io/github/license/gmsgowtham/react-native-marked)](https://github.com/gmsgowtham/react-native-marked/blob/main/LICENSE)\n[![CI](https://github.com/gmsgowtham/react-native-marked/actions/workflows/build.yml/badge.svg)](https://github.com/gmsgowtham/react-native-marked/actions/workflows/build.yml)\n[![Coverage Status](https://coveralls.io/repos/github/gmsgowtham/react-native-marked/badge.svg?branch=main)](https://coveralls.io/github/gmsgowtham/react-native-marked?branch=main)\n[![npm](https://img.shields.io/npm/v/react-native-marked)](https://www.npmjs.com/package/react-native-marked)\n[![npm](https://img.shields.io/npm/dw/react-native-marked)](https://www.npmjs.com/package/react-native-marked)\n\nMarkdown renderer for React Native powered by\n[marked.js](https://marked.js.org/) with built-in theming support\n\n## Installation\n\n#### For React Native 0.76 and above, please use the latest version.\n```sh\nyarn add react-native-marked@rc react-native-svg\n```\n\n#### For React Native 0.75 and below, please use version 6.\n```sh\nyarn add react-native-marked@6.0.7 react-native-svg\n```\n\n## Usage\n\n### Using Component\n\n```tsx\nimport * as React from \"react\";\nimport Markdown from \"react-native-marked\";\n\nconst ExampleComponent = () =\u003e {\n  return (\n    \u003cMarkdown\n      value={`# Hello world`}\n      flatListProps={{\n        initialNumToRender: 8,\n      }}\n    /\u003e\n  );\n};\n\nexport default ExampleComponent;\n```\n\n#### [Props](https://github.com/gmsgowtham/react-native-marked/blob/main/src/lib/types.ts#L17)\n\n| Prop          | Description                                                                                                                                  | Type                                                                                                                                                                           | Optional? |\n|---------------|----------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| value         | Markdown value                                                                                                                               | string                                                                                                                                                                         | false     |\n| flatListProps | Props for customizing the underlying FlatList used                                                                                           | `Omit\u003cFlatListProps\u003cReactNode\u003e, 'data' \\| 'renderItem' \\| 'horizontal'\u003e`\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e(`'data'`, `'renderItem'`, and `'horizontal'` props are omitted and cannot be overridden.) | true      |\n| styles        | Styles for parsed components                                                                                                                 | [MarkedStyles](src/theme/types.ts)                                                                                                                                             | true      |\n| theme         | Props for customizing colors and spacing for all components,and it will get overridden with custom component style applied via 'styles' prop | [UserTheme](src/theme/types.ts)                                                                                                                                                | true      |\n| baseUrl       | A prefix url for any relative link                                                                                                           | string                                                                                                                                                                         | true      |\n| renderer      | Custom component Renderer                                                                                                                    | [RendererInterface](src/lib/types.ts)                                                                                                                                          | true      |\n\n\n### Using hook\n\n`useMarkdown` hook will return list of elements that can be rendered using a list component of your choice.\n\n```tsx\nimport React, { Fragment } from \"react\";\nimport { ScrollView, useColorScheme } from \"react-native\";\nimport { useMarkdown, type useMarkdownHookOptions } from \"react-native-marked\";\n\nconst CustomComponent = () =\u003e {\n  const colorScheme = useColorScheme();\n  const options: useMarkdownHookOptions = {\n    colorScheme\n  }\n  const elements = useMarkdown(\"# Hello world\", options);\n  return (\n    \u003cScrollView\u003e\n      {elements.map((element, index) =\u003e {\n        return \u003cFragment key={`demo_${index}`}\u003e{element}\u003c/Fragment\u003e\n      })}\n    \u003c/ScrollView\u003e\n  );\n};\n```\n\n#### Options\n\n| Option      | Description                                                                                                                                  | Type                                             | Optional? |\n|-------------|----------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|-----------|\n| colorScheme | Device color scheme (\"dark\" or \"light\")                                                                                                      | ColorSchemeName                                  | false     |\n| styles      | Styles for parsed components                                                                                                                 | [MarkedStyles](src/theme/types.ts)               | true      |\n| theme       | Props for customizing colors and spacing for all components,and it will get overridden with custom component style applied via 'styles' prop | [UserTheme](src/theme/types.ts)                  | true      |\n| baseUrl     | A prefix url for any relative link                                                                                                           | string                                           | true      |\n| renderer    | Custom component Renderer                                                                                                                    | [RendererInterface](src/lib/types.ts)            | true      |\n| tokenizer   | Generate custom tokens                                                                                                                       | [MarkedTokenizer\u003cCustomToken\u003e](src/lib/types.ts) | true      |\n\n\n## Examples\n\n- CodeSandbox: https://codesandbox.io/s/react-native-marked-l2hpi3?file=/src/App.js\n\n## Supported elements\n\n- [x] Headings (1 to 6)\n- [x] Paragraph\n- [x] Emphasis (bold, italic, and strikethrough)\n- [x] Link\n- [x] Image\n- [x] Blockquote\n- [x] Inline Code\n- [x] Code Block\n- [x] List (ordered, unordered)\n- [x] Horizontal Rule\n- [x] Table\n- [ ] HTML\n\nRef: [CommonMark](https://commonmark.org/help/)\n\n\u003e HTML will be treated as plain text. Please refer [issue#290](https://github.com/gmsgowtham/react-native-marked/issues/290) for a potential solution\n\n## Advanced\n### Using custom components\n\n\u003e Custom components can be used to override elements, i.e. Code Highlighting, Fast Image integration\n\n#### Example\n\n```tsx\nimport React, { ReactNode, Fragment } from \"react\";\nimport { Text, ScrollView } from \"react-native\";\nimport type { ImageStyle, TextStyle } from \"react-native\";\nimport Markdown, { Renderer, useMarkdown } from \"react-native-marked\";\nimport type { RendererInterface } from \"react-native-marked\";\nimport FastImage from \"react-native-fast-image\";\n\nclass CustomRenderer extends Renderer implements RendererInterface {\n  constructor() {\n    super();\n  }\n\n  codespan(text: string, _styles?: TextStyle): ReactNode {\n    return (\n      \u003cText key={this.getKey()} style={{ backgroundColor: \"#ff0000\" }}\u003e\n        {text}\n      \u003c/Text\u003e\n    );\n  }\n\n  image(uri: string, _alt?: string, _style?: ImageStyle): ReactNode {\n    return (\n      \u003cFastImage\n        key={this.getKey()}\n        style={{ width: 200, height: 200 }}\n        source={{ uri: uri }}\n        resizeMode={FastImage.resizeMode.contain}\n      /\u003e\n    );\n  }\n}\n\nconst renderer = new CustomRenderer();\n\nconst ExampleComponent = () =\u003e {\n  return (\n    \u003cMarkdown\n      value={\"`Hello world`\"}\n      flatListProps={{\n        initialNumToRender: 8,\n      }}\n      renderer={renderer}\n    /\u003e\n  );\n};\n\n// Alternate using hook\nconst ExampleComponentWithHook = () =\u003e {\n  const elements = useMarkdown(\"`Hello world`\", { renderer });\n\n  return (\n    \u003cScrollView\u003e\n      {elements.map((element, index) =\u003e {\n        return \u003cFragment key={`demo_${index}`}\u003e{element}\u003c/Fragment\u003e\n      })}\n    \u003c/ScrollView\u003e\n  )\n}\n\nexport default ExampleComponent;\n```\n\n\u003e Please refer to [RendererInterface](src/lib/types.ts) for all the overrides\n\n\u003e Note:\n\u003e\n\u003e For `key` property for a component, you can use the `getKey` method from Renderer class.\n\n#### Example\n\nOverriding default codespan tokenizer to include LaTeX.\n\n```tsx\n\nimport React, { ReactNode } from \"react\";\nimport Markdown, { Renderer, MarkedTokenizer, MarkedLexer } from \"react-native-marked\";\nimport type { RendererInterface, CustomToken } from \"react-native-marked\";\n\nclass CustomTokenizer extends Tokenizer {\n  codespan(src: string): Tokens.Codespan | undefined {\n    const match = src.match(/^\\$+([^\\$\\n]+?)\\$+/);\n    if (match?.[1]) {\n      return {\n        type: \"codespan\",\n        raw: match[0],\n        text: match[1].trim(),\n      };\n    }\n\n    return super.codespan(src);\n  }\n}\n\nclass CustomRenderer extends Renderer implements RendererInterface {\n  codespan(text: string, styles?: TextStyle): ReactNode {\n    return (\n      \u003cText style={styles} key={\"key-1\"}\u003e\n        {text}\n      \u003c/Text\u003e\n    )\n  }\n}\n\nconst renderer = new CustomRenderer();\nconst tokenizer = new CustomTokenizer();\n\nconst ExampleComponent = () =\u003e {\n  return (\n    \u003cMarkdown\n      value={\"$ latex code $\\n\\n` other code `\"}\n      flatListProps={{\n        initialNumToRender: 8,\n      }}\n      renderer={renderer}\n      tokenizer={tokenizer}\n    /\u003e\n  );\n};\n```\n\n#### Example\n\n## Screenshots\n\n|                          Dark Theme                           |                           Light Theme                            |\n|:-------------------------------------------------------------:|:----------------------------------------------------------------:|\n| ![Dark theme](assets/dark-theme-01.png?raw=true 'Dark Theme') | ![Light theme](assets/light-theme-01.png?raw=true 'Light Theme') |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the\nrepository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with\n[create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n\n## Built using\n\n- [Marked](https://marked.js.org/)\n- [@jsamr/react-native-li](https://github.com/jsamr/react-native-li)\n- [react-native-reanimated-table](https://github.com/dohooo/react-native-reanimated-table)\n- [react-native-svg](https://github.com/software-mansion/react-native-svg)\n- [svg-parser](https://github.com/Rich-Harris/svg-parser)\n- [github-slugger](https://github.com/Flet/github-slugger)\n- [html-entities](https://github.com/mdevils/html-entities)\n\n\n\u003ca href=\"https://www.buymeacoffee.com/gmsgowtham\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"width: 120px !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmsgowtham%2Freact-native-marked","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmsgowtham%2Freact-native-marked","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmsgowtham%2Freact-native-marked/lists"}