Component with bindings from plugin

Technical Questions CMS
1

So, I have a plugin where I fetch some data and call onChange on the result. However, I’m not using the data in my custom component, it simply acts as a data wrapper where the end user should be able to make use of the data in the children of this component.

My question is, how am I supposed to make the data available in the bindings?

1 Like
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: