{"id":15130931,"url":"https://github.com/lacymorrow/react-github-readme-md","last_synced_at":"2026-05-21T01:01:32.568Z","repository":{"id":196407437,"uuid":"696054164","full_name":"lacymorrow/react-github-readme-md","owner":"lacymorrow","description":"Render any GitHub README inside a React app — GFM alerts, heading anchors, dark mode","archived":false,"fork":false,"pushed_at":"2026-05-14T23:08:35.000Z","size":2514,"stargazers_count":2,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-14T23:36:44.421Z","etag":null,"topics":["component","documentation","gfm","github","github-readme","markdown","marked","md","npm","react","reactjs","readme","renderer","typescript","viewer"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-github-readme-md","language":"SCSS","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/lacymorrow.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"github":"lacymorrow","patreon":"lacymorrow","open_collective":"lacy-morrow","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["buymeacoffee.com/lm","lacymorrow.com/donate"]}},"created_at":"2023-09-25T01:34:37.000Z","updated_at":"2026-05-14T23:08:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"9239f710-0325-49b9-9f81-ea7f399f7106","html_url":"https://github.com/lacymorrow/react-github-readme-md","commit_stats":{"total_commits":56,"total_committers":2,"mean_commits":28.0,"dds":"0.017857142857142905","last_synced_commit":"4af815c4f6475108fee57fc1d8dde38f260b7089"},"previous_names":["lacymorrow/react-github-readme-md"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lacymorrow/react-github-readme-md","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lacymorrow%2Freact-github-readme-md","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lacymorrow%2Freact-github-readme-md/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lacymorrow%2Freact-github-readme-md/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lacymorrow%2Freact-github-readme-md/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lacymorrow","download_url":"https://codeload.github.com/lacymorrow/react-github-readme-md/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lacymorrow%2Freact-github-readme-md/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33283355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-20T15:12:43.734Z","status":"ssl_error","status_checked_at":"2026-05-20T15:12:42.300Z","response_time":356,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["component","documentation","gfm","github","github-readme","markdown","marked","md","npm","react","reactjs","readme","renderer","typescript","viewer"],"created_at":"2024-09-26T03:08:39.502Z","updated_at":"2026-05-21T01:01:32.523Z","avatar_url":"https://github.com/lacymorrow.png","language":"SCSS","funding_links":["https://github.com/sponsors/lacymorrow","https://patreon.com/lacymorrow","https://opencollective.com/lacy-morrow","buymeacoffee.com/lm","lacymorrow.com/donate","https://buymeacoffee.com/lm"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/lacymorrow/react-github-readme-md\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/lacymorrow/react-github-readme-md/main/.github/assets/logo-horizontal-dark.svg\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/lacymorrow/react-github-readme-md/main/.github/assets/logo-horizontal.svg\" alt=\"react-github-readme-md\" width=\"420\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\n  \u003cp\u003e\u003cstrong\u003eRender any GitHub README inside a React app\u003c/strong\u003e ➔ GitHub styling, dark mode, GFM alerts, heading anchors, fuzzy links.\u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-github-readme-md\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/react-github-readme-md?style=flat\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-github-readme-md\"\u003e\u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/react-github-readme-md?style=flat\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/lacymorrow/react-github-readme-md/actions/workflows/ci.yml\"\u003e\u003cimg alt=\"CI\" src=\"https://img.shields.io/github/actions/workflow/status/lacymorrow/react-github-readme-md/ci.yml?style=flat\u0026label=CI\"\u003e\u003c/a\u003e\n    \u003ca href=\"./LICENSE\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/react-github-readme-md?style=flat\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.chromatic.com/component?appId=6528a9ef83709c394594fc93\u0026csfId=lacymorrow-react-github-readme-md\"\u003e\u003cimg alt=\"Storybook\" src=\"https://img.shields.io/badge/Storybook-demo-ff4785?style=flat\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003e [!IMPORTANT]\n\u003e GFM alerts work too! Like this one. Notes, warnings, tips — they all render with the same styling you see on GitHub.\n\n## Features\n\n- Render any Markdown file with **GitHub native styling**\n- **Light + dark** modes\n- [`marked`](https://github.com/markedjs/marked)-powered with plugins for **GFM alerts**, **heading anchors**, and **fuzzy links**\n- Works on both the client and server (SSR-safe)\n- TypeScript types included\n- Tiny API: one component, two ways to load content\n\n## Install\n\n```bash\nnpm install react-github-readme-md\n```\n\n## Usage\n\n### From a GitHub repo\n\n```jsx\nimport { GitHubReadme } from \"react-github-readme-md\";\n\n\u003cGitHubReadme username=\"lacymorrow\" repo=\"react-github-readme-md\" /\u003e;\n```\n\n### From a path or URL\n\n```jsx\n\u003cGitHubReadme src=\"path/to/my/file.md\" /\u003e\n// or\n\u003cGitHubReadme src=\"https://example.com/some.md\" /\u003e\n```\n\n\u003e [!TIP]\n\u003e Live, interactive demo on [Chromatic / Storybook](https://main--6528a9ef83709c394594fc93.chromatic.com).\n\n\u003e [!NOTE]\n\u003e `.markdown-body` is `width: 100%` by default so `\u003cpre\u003e` blocks don't overflow. Override via the `className` prop or your own CSS.\n\n## API\n\n### `\u003cGitHubReadme /\u003e`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `username` | `string` | | GitHub user/org. **Required** if `src` is not provided. |\n| `repo` | `string` | | GitHub repo name. **Required** if `src` is not provided. |\n| `src` | `string` | | Path or URL to a Markdown file. **Required** if `username` + `repo` aren't provided. |\n| `addHeadingIds` | `boolean` | `true` | Adds `id` attributes to headings (via [marked-gfm-heading-id](https://www.npmjs.com/package/marked-gfm-heading-id)) so anchor links work. |\n| `linkify` | `boolean` | `false` | Auto-link bare URLs in text (via [marked-linkify-it](https://www.npmjs.com/package/marked-linkify-it)). |\n| `className` | `string` | | Forwarded to the rendered container. |\n\n## Plugins\n\nshipped with the box:\n\n- **GFM alerts** — `\u003e [!NOTE]`, `\u003e [!TIP]`, `\u003e [!IMPORTANT]`, `\u003e [!WARNING]`, `\u003e [!CAUTION]`. Via [marked-alert](https://github.com/bent10/marked-extensions/tree/main/packages/alerts). The bundled GitHub styles cover the alert blocks — no Tailwind required.\n- **Heading anchors** — Auto-generated `id` slugs. Via [marked-gfm-heading-id](https://www.npmjs.com/package/marked-gfm-heading-id).\n- **Fuzzy links** — Bare URLs (e.g. `google.com`) become clickable. Via [marked-linkify-it](https://www.npmjs.com/package/marked-linkify-it).\n\n## Playground\n\n➔ **[Open in StackBlitz](https://stackblitz.com/github/lacymorrow/react-github-readme-md/tree/main/examples/stackblitz)** — a tiny Vite + React + TS app with editable `username` / `repo` inputs that re-renders the chosen README live.\n\nLocal copy: [`examples/stackblitz/`](./examples/stackblitz)\n\n## Related\n\n- Other utilities by the author: [shipx](https://github.com/lacymorrow/shipx) · [react-is-online-context](https://github.com/lacymorrow/react-is-online-context).\n\n## Acknowledgments\n\n- [@sindresorhus](https://github.com/sindresorhus) for [generate-github-markdown-css](https://github.com/sindresorhus/generate-github-markdown-css) — the source of the bundled GitHub styles.\n- [marked](https://github.com/markedjs/marked) — the markdown parser.\n- [marked-alert](https://github.com/bent10/marked-extensions), [marked-gfm-heading-id](https://www.npmjs.com/package/marked-gfm-heading-id), [marked-linkify-it](https://www.npmjs.com/package/marked-linkify-it) — the plugin trifecta.\n\n## License\n\n[MIT](./LICENSE) © [Lacy Morrow](https://lacymorrow.com)\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eIf this saved you time, consider \u003ca href=\"https://github.com/sponsors/lacymorrow\"\u003esponsoring on GitHub\u003c/a\u003e, \u003ca href=\"https://patreon.com/lacymorrow\"\u003esupporting on Patreon\u003c/a\u003e, or \u003ca href=\"https://buymeacoffee.com/lm\"\u003ebuying a coffee\u003c/a\u003e.\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flacymorrow%2Freact-github-readme-md","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flacymorrow%2Freact-github-readme-md","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flacymorrow%2Freact-github-readme-md/lists"}