Render the README.md file of a GitHub Repository in React
MIT License
Render the README.md file of a GitHub Repository in React
light
and dark
modes[!IMPORTANT] GFM alerts work too!
Using NPM:
$ npm install react-github-readme-md
import { GitHubReadme } from "react-github-readme-md";
// ...
<GitHubReadme username="lacymorrow" repo="react-github-readme-md" />
// or
// <GitHubReadme src="path/to/my/file.md />
.markdown-body
class has width: 100%
by default to prevent <pre>
elements from overflowing its container. You can override this by passing a className
prop or setting the width
in your own CSS.
props.username
The GitHub username.
Required (if src
is not provided)
Type: string
props.repo
The specified GitHub repository where the README.md
is located.
Required (if src
is not provided)
Type: string
props.src
A path to a Markdown file. This can be a local path or a URL.
Required (if username
and repo
are not provided)
Type: string
props.addHeadingIds
Uses marked-gfm-heading-id
to add id
attributes to headings in the markdown so that # Heading
becomes `Heading and anchor links work.
optional
Type: boolean
default: true
props.linkify
Uses marked-linkify-it
to parse fuzzy links in the markdown like google.com and turn them into links.
optional
Type: boolean
default: false
See the marked-linkify-it package for more information.
See the marked-gfm-heading-id package for more information.
You may need Tailwind CSS installed for the alerts to display correctly. See the marked-alerts package for more information.
Thanks to Sindresorhus for his generate-github-markdown-css
repo, used to generate the styles!