Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lacymorrow/react-github-readme-md
Render the README.md file of a GitHub Repository in React
https://github.com/lacymorrow/react-github-readme-md
component github github-readme markdown md npm react reactjs readme
Last synced: 2 days ago
JSON representation
Render the README.md file of a GitHub Repository in React
- Host: GitHub
- URL: https://github.com/lacymorrow/react-github-readme-md
- Owner: lacymorrow
- License: mit
- Created: 2023-09-25T01:34:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-10T04:03:14.000Z (18 days ago)
- Last Synced: 2024-09-21T14:34:29.787Z (6 days ago)
- Topics: component, github, github-readme, markdown, md, npm, react, reactjs, readme
- Language: SCSS
- Homepage: https://www.chromatic.com/component?appId=6528a9ef83709c394594fc93&csfId=lacymorrow-react-github-readme-md&buildNumber=5&k=6528ae3054fd2afdd25fb253-1200px-interactive-true&h=13&b=-1
- Size: 1.5 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-github-readme-md [
](https://www.patreon.com/bePatron?u=55065733)
[](https://badge.fury.io/js/react-github-readme-md) [](https://codeclimate.com/github/lacymorrow/react-github-readme-md/maintainability)
> Render the README.md file of a GitHub Repository in React
[**Storybook Demo**](https://www.chromatic.com/component?appId=6528a9ef83709c394594fc93&csfId=lacymorrow-react-github-readme-md&buildNumber=5&k=6528ae3054fd2afdd25fb253-1200px-interactive-true&h=3&b=-1)
## Features
* Render any Markdown file with GitHub styling
* Supports both `light` and `dark` modes
* Marked plugins add support for fuzzy links, heading anchors, and [GFM alerts](https://github.com/orgs/community/discussions/16925)
* Works on both the client and server
> [!IMPORTANT]
> GFM alerts work too!
## Install
Using [NPM](https://npmjs.com):
```bash
$ npm install react-github-readme-md
```
## Usage
```js
import { GitHubReadme } from "react-github-readme-md";
// ...
// or
// 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`
## Plugins
### Fuzzy Links
See the [marked-linkify-it](https://www.npmjs.com/package/marked-linkify-it) package for more information.
### Heading Anchors
See the [marked-gfm-heading-id](https://www.npmjs.com/package/marked-gfm-heading-id) package for more information.
### GFM Alerts
You may need Tailwind CSS installed for the alerts to display correctly.
See the [marked-alerts](https://github.com/bent10/marked-extensions/tree/main/packages/alerts) package for more information.
## Credit
Thanks to [Sindresorhus](https://github.com/sindresorhus) for his [`generate-github-markdown-css`](https://github.com/sindresorhus/generate-github-markdown-css) repo, used to generate the styles!
##### Also
- [marked](https://github.com/markedjs/marked)
- [marked-gfm-heading-id](https://www.npmjs.com/package/marked-gfm-heading-id)
- [marked-linkify-it](https://www.npmjs.com/package/marked-linkify-it)
## License
[MIT](http://opensource.org/licenses/MIT) © [Lacy Morrow](http://lacymorrow.com)