Skip to main content
Our new developer certification is live!

ReadingTime

Displays estimated reading time based on word count from rich text content. Calculates reading time server-side and displays it in a user-friendly format.

Props

PropTypeRequiredDefaultDescription
content{ children?: JSONRTENode[] }No-Rich text content to calculate reading time from
wordsPerMinutenumberNo200Average reading speed in words per minute
classNamestringNo''Additional CSS classes
variant'default' | 'inline'No'default'Display style (inline is compact for meta rows)

Usage

import ReadingTime from '@/components/atoms/ReadingTime';

// Basic usage with blog content
<ReadingTime content={blog.blog_content?.copy} />

// With guide content
<ReadingTime content={guide.guide_content?.copy} />

// Custom reading speed
<ReadingTime 
  content={blog.blog_content?.copy} 
  wordsPerMinute={250} 
/>

// With custom styling
<ReadingTime 
  content={blog.blog_content?.copy}
  className="mb-6"
/>

// Inline meta usage
<ReadingTime
  content={blog.blog_content?.copy}
  variant="inline"
/>

Features

  • Server-side calculation: Calculates reading time during page generation
  • Automatic word counting: Extracts and counts words from rich text JSON structure
  • Smart display: Returns null if no content or zero words
  • Pluralization: Correctly displays "minute" or "minutes"
  • Configurable: Customizable words per minute (default: 200)
  • Design system: Inline variant uses cs-xs-body for compact metadata display

Calculation

  • Default reading speed: 200 words per minute (standard average)
  • Minimum time: Always shows at least 1 minute
  • Rounding: Rounds up to nearest minute

Examples

// In a blog/guide meta row
import { getEntryPublishDate } from '@/lib/utils';

const publishedAt = getEntryPublishDate(content);

<div className="flex flex-wrap items-center gap-4 mb-4">
  <DateDisplay publishedAt={publishedAt} updatedAt={content.updated_at} />
  <ReadingTime content={content.blog_content?.copy} variant="inline" />
</div>

Notes

  • Returns null if content is missing or has no words
  • Word count is calculated by extracting all text from the JSON structure and splitting on whitespace
  • Uses the same extractTextFromNode utility as other components for consistency
  • Reading time is calculated server-side, so it's available immediately on page load