Custom Component with Localized Input

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!'
    },
  ],
});

Other Useful Localization Topics:

Custom Targeting Attributes
Intro to Localization in Builder.io
Localization in Builder.io
Field-Level Localization
Custom Field Localization

3 Likes