Can i split the text inside rich text into divs?

Hello there,
trying to animate prismic rich text and I want to have each word in it's own div to have a unified animation all over my site, is that's possible ?

I think you might be able to achieve this with custom labels - each word can be wrapped in a different custom label and can be rendered as any element you wish.

Custom labels would work! I'm going to assume you're using @prismicio/react's <PrismicRichText> component. In that case, you could also do this with the components prop. It would be something like this:

    paragraph: ({ children }) => {
      children.split(" ").map(child => <div>{child + " "}</div>)

(I haven't tested this code, but I hope it helps.)


1 Like

I will give it a try thank you

1 Like

Thank you for your help, children is an object not an array i will try to use the custom labels

1 Like

Awesome! Let me know if you need anything else :+1: