@richmd/react NPM

@richmd/react

NPM License NPM Version NPM Downloads

React component for Richmd - a tool for creating rich content with Markdown.

Installation

# Using npm
npm install @richmd/react

# Using yarn
yarn add @richmd/react

# Using pnpm
pnpm add @richmd/react

Usage with Next.js (App Router)

1. Import CSS in your root layout

First, import the required CSS in your root layout file (app/layout.tsx):

import "@richmd/react/dist/richmd.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Use the Richmd component in your pages or components

Since the Richmd component uses client-side features, you need to use the "use client" directive when using it in your pages or components:

"use client";

import { Richmd } from "@richmd/react";

export default function MyPage() {
  const markdownText = `# Hello, Richmd!

This is a **bold text** and *italic text*.

## Features
- Rich markdown support
- Easy to use
- Customizable

\`\`\`js
// Code block example
const hello = "world";
console.log(hello);
\`\`\`

> Blockquote example

| Table | Example |
|-------|---------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
`;

  return (
    <div className="container">
      <Richmd text={markdownText} className="markdown-content" />
    </div>
  );
}

3. Create a markdown editor (optional)

You can create a simple markdown editor with live preview:

"use client";

import { useState } from "react";
import { Richmd } from "@richmd/react";

export default function MarkdownEditor() {
  const [text, setMarkdown] = useState('# Start typing here...');

  return (
    <div className="flex flex-col md:flex-row gap-4">
      <div className="w-full md:w-1/2">
        <textarea 
          className="w-full h-[500px] p-4 border rounded"
          value={text}
          onChange={(e) => setMarkdown(e.target.value)}
        />
      </div>
      <div className="w-full md:w-1/2 border rounded p-4">
        <Richmd text={text} className="prose" />
      </div>
    </div>
  );
}

4. Use the RichmdSlide component (optional)

You can use the RichmdSlide component to create slide-style Markdown presentations. Here's an example:

"use client";

import { RichmdSlide } from "@richmd/react";

const md = `:use slide:

:---:title.sunset
# title

subtext
:---:

# title

:<--:content.sunset
# Subtitle

subtext

*subtext*
:---:

:<--:content.sunset
# List

- List
- List
  - List
  - List
    - List
- List
:---:

:<--:content.sunset
# Text

===info
testtest
===

\`\`\`js
const a = 1;
console.log(a);
\`\`\`

$$
f(x) = x^2 + x + 2
$$
:---:
`;

export default function SlideShow() {
  return (
    <RichmdSlide text={md} isController={true} />
  );
}

Setting the isController property to true enables the slide controller.

Component API

`Richmd`

The Richmd component accepts the following props:

Prop	Type	Required	Description
`text`	string	Yes	The markdown text to render
`id`	string	No	HTML id attribute for the container div
`className`	string	No	CSS class name for the container div

`RichmdSlide`

The RichmdSlide component accepts the following props:

Prop	Type	Required	Description
`text`	string	Yes	The markdown text to render
`isController`	boolean	No	Toggles the display of the slide controller
`pdfDownload`	boolean	No	Switching to PDF distribution mode. (Default: `false`)