@veert00x/react-markdown-renderer

A React component library for rendering markdown content in React applications.

Features

• Render markdown content in React applications.
• Supports GitHub Flavored Markdown (GFM) and line breaks.
• Customizable rendering of markdown elements through CSS.

Installation

• You can install the library from npm using the following command:

npm install @veert00x/react-markdown-renderer

• You can install the library from github using the following command:

npm install github:veert00x/react-markdown-renderer#main

Usage

• In Client Components:

import { Renderer } from "@veert00x/react-markdown-renderer/client";

return (
    <div className="App">
      <h1>Hello World!</h1>
      <Renderer content="# Hello, World!" />
    </div>
  );

• In Server Components:

import { ServerRenderer } from '@veert00x/react-markdown-renderer/server';

export default function Page() {
  const markdownContent = "# Hello, World!";
  return (
    <div>
      <h1>Markdown Renderer</h1>
      <ServerRenderer content={markdownContent} />
    </div>
  );
}

Customization

You can customize the rendering of markdown elements by giving the markdown renderer a className or ID and then using CSS to style the elements.

<Renderer content={markdownContent} className="my-markdown" id="markdown-renderer-1" />

.my-markdown h1 {
    color: blue;
}
.my-markdown p {
    font-size: 18px;
}
#markdown-renderer-1 a {
    color: red;
}

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests to improve the library.

License

This project is licensed under the MIT License. See the LICENSE file for details