Component with bindings from plugin

Technical Questions CMS
2

Howdy @kevva, welcome to the forum!

Great question. You can use our StateProvider component for this.

E.g. if the property is called theProperty:

import { StateProvider } from "@builder.io/react";

function MyComponent(props) {
  return (
    <StateProvider state={{ myProperty: props.myProperty }}>
      {/* or if you use withChildren() HOC the below can just be {props.children} */}
      {props.builderBlock?.children?.map((childBlock) => (
        <BuilderBlockComponent block={childBlock} key={childBlock.id} />
      ))}
    </StateProvider>
  );
}

That’ll make state.theProperty available to all children

Note to use StateProvider in this way you need to be on @builder.io/react >= 1.1.14-0 (currently the latest dev release). If you are on and need to stay on an older version let me know and I can show you the slightly less elegant way you can accomplish this without our recent StateProvider update

Also, an important caveate - right now Builder.io’s UIs will only pick up top level state properties, not currently the active state of the currently selected element - so theProperty won’t show up in the dropdown menus.

If this would be useful to you - a separate feature request post would be great for us to track and implement that as a feature, since it may be very handy here :slight_smile: