ContentRenderer
Markdown/HTML content renderer with automatic RTL/LTR detection and proper code block handling.
Live Demo
Rendered Content
Content with automatic direction detection
Sample Content
This is bold and italic text.
- List item 1
- List item 2
const example = "code block";Installation
Terminalbash
Usage
Reacttsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
contentRequired | string | undefined | The content to render |
format | 'markdown' | 'html' | 'text' | 'markdown' | Content format (markdown, html, or text) |
dir | 'auto' | 'ltr' | 'rtl' | 'auto' | Text direction (auto, ltr, or rtl). Use auto for automatic detection. |
enableCodeHighlight | boolean | true | Enable syntax highlighting for code blocks |
enableGFM | boolean | true | Enable GitHub Flavored Markdown features |
className | string | undefined | Additional CSS classes to apply |
Use Cases
Rendering markdown or HTML content
CMS-driven page content display
Preview panels for rich text editors
Help center article displays
Best Practices
Do
- ✓ Sanitize HTML content before rendering
- ✓ Apply consistent typography styles
- ✓ Handle missing or empty content gracefully
Don't
- ✗ Don't render unsanitized user-provided HTML
- ✗ Don't override the content's semantic structure
- ✗ Don't apply conflicting styles to rendered content