https://github.com/rossonlinesolutions/react-markdown
A markdown render component for react.
https://github.com/rossonlinesolutions/react-markdown
gfm markdown react react-component-library react-markdown yarn
Last synced: 5 months ago
JSON representation
A markdown render component for react.
- Host: GitHub
- URL: https://github.com/rossonlinesolutions/react-markdown
- Owner: rossonlinesolutions
- License: mit
- Created: 2024-07-13T11:03:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-23T18:53:30.000Z (over 1 year ago)
- Last Synced: 2025-01-31T07:11:13.063Z (about 1 year ago)
- Topics: gfm, markdown, react, react-component-library, react-markdown, yarn
- Language: CSS
- Homepage: https://ross-agentur.de
- Size: 1010 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @rossonlinesolutions/react-markdown
> A markdown render component for react.
## Build and Run
To build this package, just run:
```sh
# Installs all dependencies
yarn install
# Builds the library
yarn build
```
### Run the demo application
To run the demo application, follow the instructions in the [example README](./example/README.md).
## Install
### npm
To install this package via npm, create a `.npmrc` file at the root of your npm project
and add the following line to it:
```
@rossonlinesolutions:registry=https://npm.pkg.github.com/
```
Then install this package by running:
```sh
npm install --save @rossonlinesolutions/react-markdown
```
### yarn
To install this package via yarn, create a `.yarnrc` file at the root of your yarn project
and add the following line to it:
```
"@rossonlinesolutions:registry" "https://npm.pkg.github.com/"
```
Then install this package by running:
```sh
yarn add @rossonlinesolutions/react-markdown
```
## Usage
```tsx
import React from 'react';
// import the Markdown view component
import MarkdownView from '@rossonlinesolutions/react-markdown';
// import the component stylesheet
import '@rossonlinesolutions/react-markdown/dist/index.css';
// An example Markdown string
const markdown_str = `# Hello
## Hello2
- [X] check
- [ ] no check
**bolt** *italic* \`inline code\`
\`\`\`js
function main() {
console.log('Hello! This here is a very long string that is here to test the scrolling capabilities of the Markdown component. So just a test!!!')
}
\`\`\`
RAW
`;
// The component function
function App() {
// Set the markdown string into the src property
return (
);
}
export default App;
```
## License
MIT © [Ross Online Solutions](https://github.com/rossonlinesolutions)