react-remarkify

A lightweight React.js utility to transform Markdown into React.js components seamlessly.

Features

• Effortlessly converts Markdown into React.js components.
• Simple and user-friendly API.
• Fully customizable.
• Supports plugins for enhanced functionality.
• Accepts flexible content via ReactNode, including Markdown strings or JSX.

Installation

Install react-remarkify using your preferred package manager:

# Using npm:
npm install react-remarkify --save

# Using Yarn:
yarn add react-remarkify

# Using pnpm:
pnpm add react-remarkify

# Using Bun:
bun add react-remarkify

Usage

react-remarkify provides two primary methods to incorporate Markdown into your React.js applications: the useRemark hook and the <Remark> component.

useRemark Hook

Use the useRemark hook to transform Markdown content into React.js components dynamically:

import React from "react";
import { useRemark } from "react-remarkify";

export default function App() {
  const heading = "# Welcome to the App";
  const description = "This is a **React-powered** Markdown block.";

  const reactContent = useRemark({
    markdown: (
      <section>
        <div>{heading}</div>
        <div>{description}</div>
        <div>_This content is rendered from JSX and Markdown combined._</div>
      </section>
    ),
    components: {
      h1: "h2",
      strong: (props) => <strong style={{ color: "#e67e22" }} {...props} />,
      em: (props) => <em style={{ fontStyle: "italic", opacity: 0.8 }} {...props} />,
    },
  });

  return reactContent;
}

<Remark> Component

Use the <Remark> component for a declarative approach:

import React from "react";
import Remark from "react-remarkify";

export default function App() {
  const heading = "# Welcome to the App";
  const description = "This is a **React-powered** Markdown block.";

  return (
    <Remark
      components={{
        h1: "h2",
        strong: (props) => <strong style={{ color: "#e67e22" }} {...props} />,
        em: (props) => <em style={{ fontStyle: "italic", opacity: 0.8 }} {...props} />,
      }}
    >
      <section>
        <div>{heading}</div>
        <div>{description}</div>
        <div>_This content is rendered from JSX and Markdown combined._</div>
      </section>
    </Remark>
  );
}

API Reference

useRemark Hook

The useRemark hook accepts the following parameters:

Note: All options except markdown are now immutable once set. This decision was made for performance optimization.

<Remark> Component

The <Remark> component accepts the same options as useRemark, but you pass the markdown content as its children:

<Remark>{markdown}</Remark>

Types

PluggableList

import { PluggableList } from "unified";

RehypeReactOptions

import { Components } from "hast-util-to-jsx-runtime";
type RehypeReactOptions = { components?: Partial<Components> };

RemarkParseOptions

import { Options } from "remark-parse";
type RemarkParseOptions = Options;

RemarkRehypeOptions

import { Options } from "remark-rehype";
type RemarkRehypeOptions = Options;

Components

import { ComponentType, JSX } from "react";
type Components = { [Key in keyof JSX.IntrinsicElements]?: ComponentType<JSX.IntrinsicElements[Key] & { node?: Element }> | keyof JSX.IntrinsicElements };

License

This project is licensed under the MIT License.

0.4.0 (01-07-2025)

• feat: Support ReactNode as input for markdown prop (accepts strings, JSX, fragments, etc.).
• perf: Prevent unnecessary reprocessing.

0.3.0 (28-03-2025)

• feat: Added components prop to customize Markdown-rendered elements.
• refactor: Replaced ReactElement with JSX.Element for better type consistency.
• fix: Improved error handling by using tryCatch utility in useRemark.

0.2.0 (17-01-2025)

• breaking: Memoize processor for performance optimization, options are now immutable.
• perf: Reduced unnecessary recomputations by memoizing the processor in useRemark hook.

0.1.3 (26-12-2024)

• feat: Return processed reactContent immediately on the first render instead of initializing with null in the useRemark hook and <Remark> component.