Get StartedGet Started

Get Started

Welcome to ds-markdown! This guide will help you get started quickly.

Installation

npm install ds-markdown

Basic Usage

The simplest way to use it:

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <DsMarkdown interval={20} answerType="answer">
      # Hello World
      
      Welcome to **ds-markdown**!
    </DsMarkdown>
  );
}

Show Typing Cursor

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <DsMarkdown 
      interval={20} 
      answerType="answer"
      showCursor
      cursor="block"
    >
      # Hello World
      
      This text will show typing cursor effect!
    </DsMarkdown>
  );
}

Streaming Data Support

Use the MarkdownCMD component to handle streaming data:

import { MarkdownCMD } from 'ds-markdown';
import { useRef } from 'react';
 
function App() {
  const ref = useRef(null);
 
  const handleStream = (chunk: string) => {
    ref.current?.push(chunk);
  };
 
  return (
    <MarkdownCMD 
      ref={ref}
      interval={20}
      showCursor
      cursor="line"
    />
  );
}

Next Steps

HomeInstallation