Skip to content
Share your own snippet

Estimated reading time

By Juan Muñoz

Content estimated reading time component in TypeScript.

ReadingTime.tsx

"use client"

interface ReadingTimeProps {
  text: string
}

const ReadingTime: React.FC<ReadingTimeProps> = ({ text }) => {

  const wordsPerMinute = 200 // Average reading speed of an adult
  const words = text.split(/\s+/).length // Split by whitespace and count words
  const minutes = Math.ceil(words / wordsPerMinute)

  return (
    <p>
      Estimated reading time: {minutes} min{minutes !== 1 ? "s" : ""}
    </p>
  )
}

export default ReadingTime

This is a simple component that receives content in Portable Text and returns a string with the estimated time that the readers would spend reading that content. It's based on the number of words, which defaults to 200 words per minute, but can be customised.

Contributor

Juan Muñoz

Full-stack developer specialised in headless projects with Next.js, Shopify, Klaviyo, Sanity.io, and more.

London