ReadTime in Framer 2024

CountReadTimeOverride.tsx

import React from "react"
import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// Learn more: https://www.framer.com/docs/guides/overrides/

// 1. Setup shared store
const useStore = createStore({
    content: "",
    numberOfWords: 0,
    text: "Store TEXT",
})

// 2. Write an override that receives a Component from the canvas
export function countContentToReadTime(Component): ComponentType {
    // 3. Return a React component
    return (props) => {
        // 4. Grab our store
        const [store, setStore] = useStore()

        console.log("PROPS", props)
        console.log("children array", props.children.props.children)

        const filteredParagraphs = props.children.props.children.filter(
            (child) => child.type === "p"
        )
        const concatenatedText = filteredParagraphs
            .map((child) => child.props.children)
            .join("")
        console.log("filteredParagraphs", filteredParagraphs)
        console.log("concatenatedText", concatenatedText)

        setStore({
            content: concatenatedText,
            numberOfWords: concatenatedText.trim().split(/\s+/).length,
        })
        // 5. Return a component with no change
        return <Component {...props} />
    }
}

export function showReadTime(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return (
            <Component
                {...props}
                text={`${Math.ceil(store.numberOfWords / 200)} min read`}
            />
        )
    }
}