tessl/npm-markdown-to-jsx

Convert markdown to JSX with ease for React and React-like projects.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Component Interface

Name: tessl/npm-markdown-to-jsx
Author: tessl

React component wrapper providing convenient JSX integration with markdown content and configuration options.

Capabilities

Markdown Component

High-level React component that accepts markdown content as children and renders it as JSX with optional configuration.

/**
 * React component that renders markdown content as JSX
 * Accepts markdown string as children and optional configuration
 */
const Markdown: React.FC<MarkdownComponentProps>;

interface MarkdownComponentProps extends Omit<React.HTMLAttributes<Element>, 'children'> {
  /** Markdown content as string */
  children: string;
  /** Configuration options for parsing and rendering */
  options?: MarkdownToJSX.Options;
}

Usage Examples:

import Markdown from "markdown-to-jsx";
import React from "react";

// Basic usage
function BasicExample() {
  return (
    <Markdown>
      # Welcome
      
      This is **markdown** content!
    </Markdown>
  );
}

// With options
function WithOptions() {
  return (
    <Markdown
      options={{
        overrides: {
          h1: { props: { className: "main-title" } },
          p: { props: { className: "paragraph" } }
        }
      }}
    >
      # Custom Styled Title
      
      This paragraph will have custom styling.
    </Markdown>
  );
}

// With additional HTML props
function WithProps() {
  return (
    <Markdown 
      className="markdown-container"
      id="content"
      data-testid="markdown-content"
    >
      # Content
      
      The wrapper element will receive these props.
    </Markdown>
  );
}

// Dynamic content
function DynamicContent({ content }: { content: string }) {
  return (
    <Markdown options={{ forceBlock: true }}>
      {content}
    </Markdown>
  );
}

Props Merging

The component automatically merges additional props with the wrapper element, allowing for full HTML attribute support.

// Props are passed through to the wrapper element
<Markdown 
  className="custom-class"
  style={{ padding: '1rem' }}
  onClick={handleClick}
  data-markdown="true"
>
  # Clickable Content
</Markdown>

// Results in wrapper element with all props applied

Wrapper Element Behavior

The component intelligently chooses wrapper elements based on content and configuration:

Inline content: Wrapped in <span> by default
Block content: Wrapped in <div> by default
Multiple elements: Always wrapped in container
Single element: May be unwrapped unless forceWrapper: true
Custom wrapper: Use options.wrapper to specify element type
No wrapper: Use options.wrapper: null to return array of elements

Usage Examples:

// Inline content (wrapped in span)
<Markdown>Just some *italic* text</Markdown>
// Renders: <span>Just some <em>italic</em> text</span>

// Block content (wrapped in div)
<Markdown>
  # Title
  
  Paragraph content
</Markdown>
// Renders: <div><h1>Title</h1><p>Paragraph content</p></div>

// Custom wrapper
<Markdown options={{ wrapper: "article" }}>
  # Article Title
  Content here
</Markdown>
// Renders: <article>...</article>

// No wrapper (returns array)
<Markdown options={{ wrapper: null }}>
  # Title
  Content
</Markdown>
// Renders: [<h1>Title</h1>, <p>Content</p>]

// Force wrapper for single elements
<Markdown options={{ forceWrapper: true }}>
  Just a single paragraph
</Markdown>
// Renders: <span><p>Just a single paragraph</p></span>

Error Handling

The component provides user-friendly error handling for invalid inputs and malformed markdown.

// Component validates input type
<Markdown>{123}</Markdown> // Logs error in development

// Handles empty content gracefully
<Markdown>{""}</Markdown> // Renders empty span

// Handles undefined content
<Markdown>{undefined}</Markdown> // Treats as empty string

Development Mode Features

Additional validation and warnings in development mode for better developer experience.

// Development warnings for common mistakes
<Markdown>{123}</Markdown> 
// Console warning: "markdown-to-jsx: component only accepts string children"

<Markdown options={{ overrides: "invalid" }}>Content</Markdown>
// Console error: "options.overrides must be an object literal"

TypeScript Integration

Full TypeScript support with proper type checking for props and options.

import Markdown from "markdown-to-jsx";

// TypeScript ensures correct prop types
function TypedComponent({ content }: { content: string }) {
  return (
    <Markdown 
      options={{
        overrides: {
          // TypeScript validates override structure
          h1: { 
            component: "h2", // Valid
            props: { className: "title" } // Valid
          },
          p: CustomParagraph // Valid React component
        }
      }}
    >
      {content}
    </Markdown>
  );
}

// Custom component with proper typing
const CustomParagraph: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
  <p className="custom-paragraph">{children}</p>
);