React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

TipTapViewer

A component for rendering rich text HTML content created with the TipTap editor.

Interactive Playground

Welcome to TipTap Viewer

This component renders rich text content created with the TipTap editor.

Features Include:

  • Headings and paragraphs
  • Bold and italic text
  • Ordered and unordered lists
  • Links and images

You can use this to display formatted content from your database or CMS.

Common Use Cases

Blog Post Content

Getting Started with Web Development

Web development is an exciting field that combines creativity with technical skills. In this guide, we'll explore the fundamentals.

What You'll Learn

  1. HTML - The structure of web pages
  2. CSS - Styling and layout
  3. JavaScript - Adding interactivity

Why Learn Web Development?

Web development skills are in high demand. Whether you want to build your own projects or work for a company, these skills will serve you well.

"The best way to learn is by doing. Start building projects today!"

Product Description

Premium Online Course

Transform your skills with our comprehensive training program.

What's Included:

  • 50+ video lessons
  • Downloadable resources
  • Lifetime access
  • Certificate of completion

Bonus: Join our exclusive community of learners!

Simple Formatted Text

This is a simple paragraph with bold text and italic text.

You can also include links in your content.

Empty Content

No content to display

Supported HTML Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Regular paragraph text with bold, italic, and underlined formatting.

Text with inline code and links.

This is a blockquote for highlighting important information.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
// Code block
function example() {
  return "Hello World";
}

Content after horizontal rule

API Reference

PropTypeDefaultDescription
valuestring''HTML string to render
classNamestring''Additional CSS classes

Features

  • Renders HTML content safely using dangerouslySetInnerHTML
  • Supports all standard TipTap editor output
  • Includes custom styling via CSS modules
  • Wraps content in StoreText component for theme consistency
  • Responsive design that adapts to container width
  • Supports headings, paragraphs, lists, blockquotes, code blocks, and more

Usage Notes

Security: This component uses dangerouslySetInnerHTML to render HTML content. Only use it with trusted content from your own TipTap editor or sanitized user input.

Styling: The component includes custom CSS modules (TipTapViewer.module.css) that style the rendered HTML elements to match your design system.

StoreText Wrapper: Content is wrapped in the StoreText component, which provides theme-aware text styling and ensures consistency with other text elements.

Use Cases: Perfect for displaying blog posts, product descriptions, course content, help documentation, or any rich text content created with TipTap editor.

Empty State: When value is empty or undefined, the component renders an empty div. You may want to handle empty states in your parent component.