Interpolation of dynamic values

Developing with Prismic
1

Is there first-class support for interpolation of values?

For example, I might want my content editors to be able to translate this sort of string:

"Hello {{name}}, welcome to our app!"

I am wondering if there is first-class support to interpolate the {{name}} variable at our app level.

We are currently consuming the @prismicio/react package, for reference.

2

Hi @isaac2,

Welcome to the Prismic community.
I'm not sure I've understood your request. Can you give more information about what you are trying to do? Some supporting examples would be helpful.

Looking forward to your reply,
Fares

4

Perhaps reading this might give you more information:

I need to insert dynamic values into CMS content.

Let me know if you need further clarification.

5

I'm pretty sure that Prismic doesn't have a first-class support for interpolation.

I've used interpolation in the past to generate large quantities of location pages which are quite similar to each other. I created one main page with {{location.name}}, {{location.product}} then run then replace the variables with strings within the codebase.

I'd be interested what is your use-case. Maybe I can help you to figure out how to do it effectively

6

Hey Kris. We're using Prismic to drive a NextJs web app, which seems to be a main use case and is supported well.

We're also using Prismic to drive a React Native mobile app, which is more of a custom setup.

I find it funny to be asked twice for an example of interpolation, when one was given in the original post. Interpolation is a basic concept when it comes to localisation.

Let me phrase it a different way: given the @prismicio/react package, and its PrismicRichText component, is there any way to arbitrarily do a replace('{{name}}', 'John Doe'), before formatting takes place?

7

@isaac2 Why don't you use HTML Serializer - Prismic to handle this? Then you can map your variables to whatever values you'd need replaced.

If you are not using a rich text but instead a simple key text field you can simply replace the fields prior to rendering

const welcomeMessage = doc.data.welcomeMessage.replace("{{name}}", name)
  return (
    <p>{welcomeMessage}</p>
  )

Am I missing something obvious? I'm pretty sure prismicio@react package doesn't support this, but I'm not sure if it's meant to, as it's not a React specific problem to solve.

Disclaimer: I don't work for Prismic and I'm a web dev just like yourself

1 Like
8

Thanks, @kris, for your response, effectivly using HTML Serializer - Prismic can be a solution for this, @isaac2 did that fix the issue for you?