React Markdown Components

A collection of reusable React components for rendering Markdown content with math support.

Features

• Markdown rendering with GitHub Flavored Markdown support
• Math rendering with KaTeX
• Chemistry notation support via mhchem
• Dark mode support
• Customizable styling
• TypeScript support

Installation

npm install react-markdown-components
# or
yarn add react-markdown-components

Usage

Basic Usage

import { MarkdownRenderer } from 'react-markdown-components';
import 'katex/dist/katex.min.css';
import 'katex/dist/contrib/mhchem.js';

function App() {
  const markdownContent = `
# Hello World

This is a paragraph with **bold** and *italic* text.

## Math Example

Inline math: $E = mc^2$

Block math:

$$
\\frac{n!}{k!(n-k)!} = \\binom{n}{k}
$$

## Chemistry Example

Chemical formula: $\\ce{H2O}$
  `;

  return (
    <div>
      <MarkdownRenderer content={markdownContent} />
    </div>
  );
}

Custom Styling

import { MarkdownRenderer } from 'react-markdown-components';

function App() {
  return (
    <MarkdownRenderer 
      content={markdownContent} 
      className="custom-prose-class"
      containerClassName="custom-container-class"
    />
  );
}

Custom Components

import { MarkdownRenderer } from 'react-markdown-components';
import { Components } from 'react-markdown';

function App() {
  const customComponents: Partial<Components> = {
    h1: (props) => <h1 className="custom-h1" {...props} />,
    // Add more custom components as needed
  };

  return (
    <MarkdownRenderer 
      content={markdownContent} 
      customComponents={customComponents}
    />
  );
}

API

MarkdownRenderer

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | - | The markdown content to render | | className | string | "" | Additional CSS class for the content container | | containerClassName | string | "" | Additional CSS class for the outer container | | customComponents | Partial | {} | Custom components to override default markdown components |

MathRenderer

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | - | The content with math expressions to render | | className | string | "" | Additional CSS class for the content container | | customComponents | Partial | {} | Custom components to override default markdown components |

TypeScript Support

This package is written in TypeScript and includes type definitions. When using custom components, you can import the Components type from react-markdown to properly type your custom components:

import { Components } from 'react-markdown';

const customComponents: Partial<Components> = {
  // Your custom components
};

License

MIT