react-remarkify

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.

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 reactContent = useRemark({ markdown: "# Hello World\nThis is **useRemark** hook" });

  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 markdown = `# Hello World\nThis is a **Remark** component`;

  return <Remark>{markdown}</Remark>;
}

API Reference

useRemark Hook

The useRemark hook accepts the following parameters:

Parameter	Type	Required	Default	Description
markdown	string	Yes	-	The Markdown content to be converted into React.js components.
rehypePlugins	PluggableList	No	-	Plugins for rehype to extend functionality.
rehypeReactOptions	RehypeReactOptions	No	-	Options for customizing the generated React.js components.
remarkParseOptions	RemarkParseOptions	No	-	Parsing options for remark.
remarkPlugins	PluggableList	No	-	Plugins for remark to enhance Markdown processing.
remarkToRehypeOptions	RemarkRehypeOptions	No	-	Options for the remark to rehype transformation.
onError	Function	No	console.error	Callback to handle errors during the Markdown-to-React conversion process.

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;

License

This project is licensed under the MIT License.