easyblockshq / easyblocks

The open-source visual builder framework.
https://easyblocks.io
GNU Affero General Public License v3.0
344 stars 55 forks source link

Allow using refs on easyblock components #81

Open chudesno opened 2 weeks ago

chudesno commented 2 weeks ago

This PR makes it possible to use useRef with child easyblock components.

Consider having 2 easyblock components: MyForm and MyInput. Suppose form component has to focus a child input when the button inside of the form is clicked.

This is commonly achieved through usage of useRef/forwardRef.

const MyForm = ({ MyInput, ...props }: NoCodeComponentProps) => {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <form>
      <MyInput.type {...MyInput.props} ref={inputRef}>
        {props.label}
      </MyInput.type>
      <Button onClick={() => inputRef.current?.focus()}>Focus</Button>
    </form>
  );
};

However MyInput.type acrually refers to an internal easyblocks wrapper component ComponentBuilder which does not pass ref down the tree to the actual input component resolved in runtime.

To solve that, this PR wraps ComponentBuilder definition into forwardRef and passes ref down to the actual component implementation.

vercel[bot] commented 2 weeks ago

Someone is attempting to deploy a commit to the Shopstory Team on Vercel.

A member of the Team first needs to authorize it.