https://github.com/sahilaggarwal2004/react-remarkify
A lightweight React.js utility to transform Markdown into React.js components seamlessly.
https://github.com/sahilaggarwal2004/react-remarkify
frontend javascript jsx markdown markdown-parser markdown-to-jsx markdown-to-react npm-package plugins react react-component react-hook react-markdown react-markdown-component react-remarkify rehype rehype-react remark remark-parse typescript
Last synced: 3 months ago
JSON representation
A lightweight React.js utility to transform Markdown into React.js components seamlessly.
- Host: GitHub
- URL: https://github.com/sahilaggarwal2004/react-remarkify
- Owner: SahilAggarwal2004
- License: mit
- Created: 2024-12-22T15:17:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-28T16:21:29.000Z (about 1 year ago)
- Last Synced: 2025-06-23T03:11:39.036Z (11 months ago)
- Topics: frontend, javascript, jsx, markdown, markdown-parser, markdown-to-jsx, markdown-to-react, npm-package, plugins, react, react-component, react-hook, react-markdown, react-markdown-component, react-remarkify, rehype, rehype-react, remark, remark-parse, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-remarkify
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
# 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 `` component.
### useRemark Hook
Use the `useRemark` hook to transform Markdown content into React.js components dynamically:
```tsx
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 markdown = useMemo(() => {
return (
{heading}
{description}
_This content is rendered from JSX and Markdown combined._
);
}, [heading, description]);
const reactContent = useRemark({
markdown,
stableMarkdown: true,
components: {
h1: "h2",
strong: (props) => ,
em: (props) => ,
},
});
return reactContent;
}
```
### Remark Component
Use the `` component for a declarative approach:
```tsx
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 (
,
em: (props) => ,
}}
>
{heading}
{description}
_This content is rendered from JSX and Markdown combined._
);
}
```
## API Reference
### useRemark Hook
The `useRemark` hook accepts the following parameters:
| Parameter | Type | Required | Default | Description |
| ----------------------- | --------------------------------------------- | -------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `markdown` | `React.ReactNode` | Yes | - | The markdown content to be converted into React.js components. |
| `stableMarkdown` | `boolean` | No | `false` | Skips expensive internal content analysis and relies on the referential identity of `markdown`. Enable this only if the provided `markdown` value is stable across renders, for example memoized with `useMemo`. If the reference changes, the content will be reprocessed. |
| `rehypePlugins` | [`PluggableList`](#pluggablelist) | No | - | Plugins for `rehype` to extend functionality. |
| `rehypeReactOptions` | [`RehypeReactOptions`](#rehypereactoptions) | No | - | Options for customizing the generated React.js components. |
| `remarkParseOptions` | [`RemarkParseOptions`](#remarkparseoptions) | No | - | Parsing options for `remark`. |
| `remarkPlugins` | [`PluggableList`](#pluggablelist) | No | - | Plugins for `remark` to enhance Markdown processing. |
| `remarkToRehypeOptions` | [`RemarkRehypeOptions`](#remarkrehypeoptions) | No | - | Options for the `remark` to `rehype` transformation. |
| `components` | [`Components`](#components) | No | - | A mapping of HTML elements to custom React components, allowing customization of rendered Markdown elements. |
| `updateMode` | [`UpdateMode`](#updatemode) | No | `immediate` | Controls how text changes are processed: `immediate` (updates instantly), `throttle` (updates at most every `updateDelay` ms, ideal for AI streaming), or `debounce` (waits `updateDelay` ms after changes stop, ideal for user typing). |
| `updateDelay` | `number (ms)` | No | 0 | Delay for `updateMode` = `throttle` or `debounce`. Has no effect when `updateMode` is `immediate`. |
| `onError` | `Function` | No | `console.error` | Callback to handle errors during the Markdown-to-React conversion process. |
**Note:** For performance reasons, the following options are treated as immutable after initialization: `rehypePlugins`, `rehypeReactOptions`, `remarkParseOptions`, `remarkPlugins`, `remarkToRehypeOptions`, `components`, and `onError`. Changing them dynamically will have no effect during the component's lifecycle.
### Remark Component
The `` component accepts the same options as `useRemark`, but you pass the `markdown` content as its children:
```tsx
{markdown}
```
## Types
### Components
```typescript
import { ComponentType, JSX } from "react";
type Components = { [Key in keyof JSX.IntrinsicElements]?: ComponentType | keyof JSX.IntrinsicElements };
```
### PluggableList
```typescript
import type { PluggableList } from "unified";
```
### RehypeReactOptions
```typescript
import type { Components } from "hast-util-to-jsx-runtime";
type RehypeReactOptions = { components?: Partial };
```
### RemarkParseOptions
```typescript
import type { Options } from "remark-parse";
type RemarkParseOptions = Options;
```
### RemarkRehypeOptions
```typescript
import type { Options } from "remark-rehype";
type RemarkRehypeOptions = Options;
```
### UpdateMode
```typescript
type UpdateMode = "immediate" | "throttle" | "debounce";
```
## License
This project is licensed under the [MIT License](LICENSE).