Can i split the text inside rich text into divs?

Developing with Prismic
1

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 ?

4

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.

5

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:

<PrismicRichText
  field={document.data.myRichTextField}
  components={{
    paragraph: ({ children }) => {
      children.split(" ").map(child => <div>{child + " "}</div>)
    }
  }}
/>

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

Sam

1 Like
7

I will give it a try thank you

1 Like
8

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

1 Like
9

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