Joint session with Vercel: How to build intelligent storefronts (May 15th) →

How to Calculate the Reading Time of Body Content with React

17 repliesLast updated: Apr 5, 2022
Hi all! Trying to implement the "react-hook-reading-time" to calculate the reading time of the body content. But the problem is it's trying to calculate the body text. But the PortableText body is one array of multiple objects. Is it possible to add this? Can I like filter out the text only from the body array?
I have simply add a field with title " reading time " and put reading time myself 😄 if it's help 🙂You have also a reading time calculator here
https://niram.org/read/ 
    {
      name: "read",
      title: "read",
      type: "number",
      description: "put number in minutes for reading time👇",
      validation: (Rule) => Rule.required(),
    },
Hey user Q, I’ve made a little custom component that might help!
Schema:

import RenderReadingTime from "./RenderReadingTime";

export default {
    name: "page",
    title: "Pages",
    type: "document",
    fields: [
        {
            title: "Content",
            name: "content",
            type: "array",
            of: [{ type: "block" }],
        },
        {
            name: "reading",
            title: "Reading Time",
            type: "string",
            inputComponent: RenderReadingTime,
        },
    ],
};
Custom component:

import React from "react";
import { Card, Stack, Inline, Badge } from "@sanity/ui";
import { FormField } from "@sanity/base/components";
import { withDocument } from "part:@sanity/form-builder";
import { useReadingTime } from "react-hook-reading-time";

export const RenderReadingTime = React.forwardRef((props, ref) => {
    const { type, document } = props;

    const filteredBlock = document.content
        .filter((x) => x._type === "block")
        .map((children) => children.children.map((texts) => texts.text));

    const readingTime = useReadingTime(filteredBlock.join(" "));

    return (
        <FormField description={type.description} title={type.title}>
            <Card padding={[3, 3, 3, 3]} shadow={1} radius={2} ref={ref}>
                <Stack space={[3, 3, 3]}>
                    <Inline space={2}>
                        <Badge tone={"primary"}>{readingTime.text}</Badge>
                        <Badge>{`${readingTime.words} words`}</Badge>
                    </Inline>
                </Stack>
            </Card>
        </FormField>
    );
});

export default withDocument(RenderReadingTime);
The styling is quite basic, but hopefully this works for you.
Tried doing it dynamically why over complicate things. Thanks!
You’re welcome!
user P Got it working. but inside GROQ I get null if "reading" is added to the query.
export const articleQuery = groq`*[_type == "article" && slug.current == $slug][0] {
    ...,
    reading,
    body[] {
    ...,
    _type == "imageWithAltText" => {
        asset -> {
          ...,
          url,
        },
    },

    _type == "video" => {
        asset -> {
          ...,
          videoPlatform,
          href,
        },
    },

    markDefs[] {
      ...,
      _type == "internalLink" => {
        "path": reference->slug.current
      }
    },
  },


  'comments': *[
    _type == "comment" &&
    article._ref == ^._id &&
    approved == true
  ],

  user -> {
    name,
    featuredImage,
  },


  "slug": slug.current,
}`;
is not 
reading->,
?
export const articleQuery = groq`*[_type == "article" && slug.current == $slug][0] {
    ...,
    reading->,
    body[] {
    ...,
    _type == "imageWithAltText" => {
        asset -> {
          ...,
          url,
        },
    },

    _type == "video" => {
        asset -> {
          ...,
          videoPlatform,
          href,
        },
    },

    markDefs[] {
      ...,
      _type == "internalLink" => {
        "path": reference->slug.current
      }
    },
  },


  'comments': *[
    _type == "comment" &&
    article._ref == ^._id &&
    approved == true
  ],

  user -> {
    name,
    featuredImage,
  },


  "slug": slug.current,
}`;
Returns null
user Q At the moment the ‘reading’ component is just a preview in the studio – it’s not patching the data into the schema. You’ll need to add the 
PatchEvent
from 
"@sanity/form-builder/PatchEvent"
into the RenderReadingTime component. I will try and update the component a bit later today!
user P Thank you very much would be nice to have it inside the GROQ instead of having to write same code on the front-end side
user P
This is what I have now but GROQ returns 1d.


import React from "react";
import { Card, Stack, Inline, Badge, TextInput } from "@sanity/ui";
import { FormField } from "@sanity/base/components";
import { withDocument } from "part:@sanity/form-builder";
import { useReadingTime } from "react-hook-reading-time";
import { useId } from "@reach/auto-id"; // hook to generate unique IDs

import PatchEvent, { set, unset } from "@sanity/form-builder/PatchEvent";

export const RenderReadingTime = React.forwardRef((props, ref) => {
  const {
    type,
    document,
    value,
    readOnly,
    onChange,
    compareValue,
    markers,
    presence,
  } = props;

  const filteredBlock = document.body
    .filter((x) => x._type === "block")
    .map((children) => children.children.map((texts) => texts.text));

  const readingTime = useReadingTime(filteredBlock.join(" "));

  // Creates a unique ID for our input
  const inputId = useId();

  // Creates a change handler for patching data
  const handleChange = React.useCallback(
    // useCallback will help with performance
    (event) => {
      const inputValue = event.currentTarget.value; // get current value
      // if the value exists, set the data, if not, unset the data
      onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()));
    },
    []
  );

  return (
    <FormField
      description={type.description}
      title={type.title}
      compareValue={compareValue}
      inputId={inputId}
      __unstable_markers={markers}
      __unstable_presence={presence}
    >
      <Card padding={[3, 3, 3, 3]} shadow={1} radius={2} ref={ref}>
        <Stack space={[3, 3, 3]}>
          <Inline space={2}>
            <Badge tone="primary">{readingTime.text}</Badge>
            <Badge>{`${readingTime.words} words`}</Badge>
            <TextInput
              id={inputId}
              onChange={handleChange}
              value={readingTime.minutes || ""}
              readOnly={readOnly}
              placeholder={readingTime.minutes}
              ref={ref}
            />
          </Inline>
        </Stack>
      </Card>
    </FormField>
  );
});

export default withDocument(RenderReadingTime);
I’ve updated the component to patch the resulting reading time into the schema (as well as showing a preview in the studio).
Although this works, I’m unsure if I’m following the best practice in terms of patching data! I ended up using the 
sanityClient
rather than 
PatchEvent
as I believe PatchEvent requires an onChange event to trigger, and as the component doesn’t have a direct user input, this isn’t possible (correct me if I’m wrong).
The reading time component supports both 
string
and 
block
types, and requires the options of 
fieldName
(which field that will be patched, which is probably is the same field) & `target`:

{
    title: "Content",
    name: "content",
    type: "array",
    of: [{ type: "block" }],
},
{
    name: "reading",
    title: "Reading Time",
    type: "string",
    inputComponent: RenderReadingTime,
    options: { fieldName: "reading", target: "content" }
},
Here is the component:

import React, { useState, useMemo, useEffect } from "react";
import { Card, Stack, Inline, Badge } from "@sanity/ui";
import { FormField } from "@sanity/base/components";
import { withDocument } from "part:@sanity/form-builder";
import { useReadingTime } from "react-hook-reading-time";
import sanityClient from "part:@sanity/base/client";
const client = sanityClient.withConfig({ apiVersion: "2022-02-15" });

export const RenderReadingTime = React.forwardRef((props, ref) => {
    const { type, document } = props;
    const [time, setTime] = useState(null);

    const valid = useMemo(() => {
        const validate =
            (type.options?.target !== undefined &&
                document[type.options?.target] !== undefined &&
                document[type.options?.fieldName] !== undefined &&
                Array.isArray(document[type.options?.target])) ||
            Object.prototype.toString.call(document[type.options?.target]) === "[object String]";
        
        const targetType = validate
            ? Array.isArray(document[type.options?.target])
                ? "block"
                : "string"
            : false;
        
        return targetType;
    }, []);

    useEffect(() => {
        client
            .patch(document._id)
            .set({ reading: time?.words && valid !== false ? time.text : "" })
            .commit()
            .catch((err) => console.error("The update to 'reading' failed: ", err.message));
    }, [time]);

    return (
        <FormField description={type.description} title={type.title}>
            <Card padding={[3, 3, 3, 3]} shadow={1} radius={2} ref={ref}>
                <Stack space={[3, 3, 3]}>
                    {valid !== false ? (
                        <RenderReadingTimePatch
                            document={document}
                            type={type}
                            valid={valid}
                            time={time}
                            setTime={setTime}
                        />
                    ) : (
                        <Inline space={2}>
                            <Badge tone={"critical"}>Invalid or missing target/fieldName</Badge>
                        </Inline>
                    )}
                </Stack>
            </Card>
        </FormField>
    );
});

const RenderReadingTimePatch = ({ document, type, valid, time, setTime }) => {
    const debouncedInput = useDebounce(document[type.options.target], 1000);

    useEffect(() => {
        if (valid === "block") {
            const filteredBlock = document[type.options.target]
                .filter((x) => x._type === "block")
                .map((children) => children.children.map((texts) => texts.text));
            setTime(useReadingTime(filteredBlock.join(" ")));
        } else {
            setTime(useReadingTime(useReadingTime(document[type.options.target])));
        }
    }, [debouncedInput]);

    return (
        <div>
            {time && (
                <Inline space={2}>
                    <Badge tone={"primary"}>{time.text}</Badge>
                    <Badge>{`${time.words} words`}</Badge>
                </Inline>
            )}
        </div>
    );
};

const useDebounce = (value, delay) => {
    const [debouncedValue, setDebouncedValue] = useState(value);
    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);
    return debouncedValue;
};

export default withDocument(RenderReadingTime);
user P Great! Which setState value has to be changed to only return "minutes" as a number instead of complete string? Because I am need the minutes only this way I can apply my own JSX.
You can change the section below from 
time.text
to 
time.minutes.toString()


    useEffect(() => {
        client
            .patch(document._id)
            .set({ reading: time?.words && valid !== false ? time.text : "" }) //CHANGE HERE
            .commit()
            .catch((err) => console.error("The update to 'reading' failed: ", err.message));
    }, [time]);
So 
.set({ reading: time?.words && valid !== false ? time.text : "" })
becomes 
.set({ reading: time?.words && valid !== false ? time.minutes.toString() : "" })
Applied time.minutes but missed the toString() function. Thank you Simon!

Was this answer helpful?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Related answers

Get more help in the community Discord

Related contributions

Auto-generate alt text for Media Library assets

FeaturedOfficial

Automatically generate accessible, multilingual alt text for images in your Sanity Media Library using Agent Actions and Sanity Functions

Bram Doppen

Bram Doppen

First Published Timestamp Function

FeaturedOfficial

Automatically track when content was first published with a timestamp that sets once and never overwrites, providing reliable publication history for analytics and editorial workflows.

Knut Melvær

Knut Melvær

Automatically tag blog posts

FeaturedOfficial

AI-powered automatic tagging for Sanity blog posts that analyzes content to generate 3 relevant tags, maintaining consistency by reusing existing tags from your content library.

Ken Jones Pizza
Knut Melvær

Ken Jones Pizza and 1 other