Markdown HTML Renderer

A flexible and customizable React component for rendering Markdown content with advanced image handling capabilities.

Author

Avneesh Kumar

Features

• Renders Markdown content to HTML
• Supports custom image and link rendering
• Handles various image formats and syntaxes
• Supports newlines in image alt text
• Clickable images with custom click handler
• Sanitizes output HTML for security
• Customizable tag processing

Installation

To install the Markdown Renderer Plugin, you can use npm or yarn:

npm install react-markdown-html-renderer

# or
yarn add react-markdown-html-renderer

Usage

Here's a basic example of how to use the MarkdownRenderer component:

import React from "react";
import { MarkdownRenderer } from "react-markdown-html-renderer";

const MyComponent = () => {
  const markdownContent = `
    # Hello World

    This is a paragraph with an image:
    ![Example Image](https://example.com/image.jpg)

    And here's a [link](https://example.com)
  `;

  const handleImageClick = (url) => {
    console.log("Image clicked:", url);
    // Handle image click, e.g., open in a modal
  };

  return <MarkdownRenderer content={markdownContent} onImageClick={handleImageClick} />;
};

export default MyComponent;

Props

The MarkdownRenderer component accepts the following props:

• content (string, required): The Markdown content to render.
• customTags (array, optional): An array of custom tag objects for additional Markdown processing.
• onImageClick (function, optional): A callback function that receives the image URL when an image is clicked.

Custom Tags

You can extend the Markdown processing by providing custom tags. Here's an example:

const customTags = [
  {
    name: "CustomImage",
    type: "image",
    replacement: (match, indicator, src, url) => {
      return `<img src="${url}" alt="${indicator}" class="custom-image" />`;
    },
  },
];

<MarkdownRenderer
  content={markdownContent}
  customTags={customTags}
  onImageClick={handleImageClick}
/>;

Security

This plugin uses DOMPurify to sanitize the rendered HTML, helping to prevent XSS attacks. However, always be cautious when rendering user-generated content.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.