Custom Component with Localized Input

Technical Questions
1

You can enable localized input fields (beta) in your custom components by setting localized: true. This will return an object to your component with keys for your locales and values for the localized data. Try it out with string, richText, or file input types and more!

Example:

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

  console.log(props.title);
  // --> returns a localized object:
  // {
  //   Default: "Default Heading"
  //   en-CA: "CA Heading"
  //   en-UK: "UK Heading"
  //   en-US: "US Heading"
  // }

  const locale = 'en-US';
  return(
    <div style={{'width': '50vw'}}>
      <h1>{props.title.[locale]}</h1>
    </div>
  )
}

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

Screen Shot 2022-05-24 at 3.16.43 PM
Screen Shot 2022-05-24 at 3.16.43 PM812×970 43.3 KB

Other Useful Localization Topics:

Custom Targeting Attributes
Intro to Localization in Builder.io

3 Likes
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