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: about 1 month 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 (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-28T16:21:29.000Z (about 2 months ago)
- Last Synced: 2025-04-06T07:39:39.808Z (about 2 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.
## 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 reactContent = useRemark({ markdown: "# Hello World\nThis is **useRemark** hook" });
return reactContent;
}
```
### `` Component
Use the `` component for a declarative approach:
```tsx
import React from "react";
import Remark from "react-remarkify";
export default function App() {
const markdown = `# Hello World\nThis is a **Remark** component`;
return {markdown};
}
```
## 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`](#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. |
| `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.
### `` Component
The `` component accepts the same options as `useRemark`, but you pass the `markdown` content as its children:
```tsx
{markdown}
```
## Types
### `PluggableList`
```typescript
import { PluggableList } from "unified";
```
### `RehypeReactOptions`
```typescript
import { Components } from "hast-util-to-jsx-runtime";
type RehypeReactOptions = { components?: Partial };
```
### `RemarkParseOptions`
```typescript
import { Options } from "remark-parse";
type RemarkParseOptions = Options;
```
### `RemarkRehypeOptions`
```typescript
import { Options } from "remark-rehype";
type RemarkRehypeOptions = Options;
```
### `Components`
```typescript
import { ComponentType, JSX } from "react";
type Components = { [Key in keyof JSX.IntrinsicElements]?: ComponentType | keyof JSX.IntrinsicElements };
```
## License
This project is licensed under the [MIT License](LICENSE).