React-markdown-html-renderer NPM

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.