Custom Component with Localized Input

Technical Questions
2

Update:
Starting with v2.0.5 of the React SDK, localized inputs will resolve to the correct locale, returning the value with the type of the input type instead of an object. The above component can instead be written like so:

// Heading.tsx

export const Heading = (props: { title: string; }) => {

  return(
    <div style={{'width': '50vw'}}>
      <h1>{props.title}</h1>
    </div>
  )
}

Builder.registerComponent(Heading, {
  name: "Heading",
  inputs: [
    {
      localized: true,
      name: "title",
      type: "text", 
      defaultValue: 'I am a heading!'
    },
  ],
});

You will also need to pass your locale to the locale prop and Builder options:

// When fetching content
builder.get('page', {
  options: { locale },
  ...
})

// In the Builder component
<BuilderComponent model="page" content={page} locale={locale} />

For a video tutorial on how to set up the rest of your app for localization with Next.js take a look here!

3 Likes