Skip to main content

format

Description​

Optional. Controls how the message content is rendered in the comments widget

Usage​

format?: "text" | "markdown" | React.ComponentType<{
    content: string;  
}>;

Parameters​

  • "text" (default) - renders the message content as plain text

  • "markdown" - renders the message content using Markdown syntax

  • Component - a custom React component that receives the message content through the content prop which is a string

Examples​

Rendering message's content as text​

import { Comments } from '@svar-ui/react-comments';

const value = [
  {
    id: "1",
    content: "Hello, world!",
    author:{ id: 1, name: "John Doe" },
    date: new Date(),
  },
];

function App() {
  return <Comments value={value} format="text" />;
}

Rendering message's content in markdown format​

import { Comments } from '@svar-ui/react-comments';

const value = [
  {
    id: "1",
    content: "Hello, **world**",
    author:{ id: 1, name: "John Doe" },
    date: new Date(),
  },
];

function App() {
  return <Comments value={value} format="markdown" />;
}

Rendering message's content in custom format​

import { Comments } from '@svar-ui/react-comments';

const value = [
  {
    id: "1", 
    content: "Hello @[John](user:1), check this link: {link|https://example.com|Click here}",
    date: new Date()
  }
];

// Custom React component that handles @mentions and custom link syntax
const CustomFormatter = ({ content }: { content: string }) => {
  // Convert @mentions: @[Name](user:id) -> <a href="/users/id">Name</a>
  const formatted = content.replace(/@\[(.*?)\]\(user:(\d+)\)/g, '<a href="/users/$2">$1</a>');
  return <span dangerouslySetInnerHTML={{ __html: formatted }} />;
};

function App() {
  return <Comments value={value} format={CustomFormatter} />;
}