How can I get custom component state in builder.io

[hafiz]

Can I get the custom component variable and state in builder ?

[manish-sharma]

Hello @hafiz,

You may find help at the below references

Accessing builderState in custom components withChildren

Maybe not the right place to post this, but wanted to share my findings. This would be a good piece to clarify in docs. Perhaps you could document the actual code in Github, as that would provide a good overview of expected props and usage builder/builder-blocks.component.tsx at main · BuilderIO/builder · GitHub

How to access data from Builder in a React Custom Component

Often times you will want to access state data from Builder inside your custom components, either to bind a state value to some part your component, or to affect the rendering of your custom component based on state inputs. There are a number of ways you can do this within Builder, many using native features of React itself. Below, we have outlined a number of ways: 1. Using React Context React provides Context to share global variables without having to pass props between parent and child. U…

[hafiz]

Hey man,
@manish-sharma The shared links are about accessing builder state in custom component. But I want to access normal register component state in builder.
I have the following component, I want to access it’s state in builder

import { withChildren } from "@builder.io/react";
import {
  Checkbox,
  FormControl,
  ListItemText,
  MenuItem,
  Select,
  SelectChangeEvent,
} from "@mui/material";
import { useState } from "react";
import { IMUISelect } from "./Types";
import { useRouter } from "next/router";

const MUISelectComponent: React.FC<IMUISelect> = ({
  itemHeight,
  itemPaddingTop,
  itemWidth,
  width,
  margin,
  height,
  options,
  paramName,
}) => {
  const [selectedItem, setSelectedItem] = useState<Array<string>>([]);
  const router = useRouter();

  const MenuProps = {
    PaperProps: {
      style: {
        maxHeight: Number(itemHeight)! * 4.5 + Number(itemPaddingTop)!,
        width: itemWidth,
      },
    },
  };

  const handleChange = (event: SelectChangeEvent<typeof selectedItem>) => {
    const {
      target: { value },
    } = event;
    if (value && value.length > 0) {
      if (Array.isArray(value)) {
        setSelectedItem(value);
        router.push(`${router.query?.page?.[0]}/?${paramName}=${value}`);
      }
    }
  };

  return (
    <FormControl sx={{ m: margin, width: width, height: height }}>
      {options && (
        <Select
          multiple
          sx={{ height: "2.313rem" }}
          value={selectedItem!}
          onChange={handleChange}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {options.map((item: any) => (
            <MenuItem key={item.title} value={item.title}>
              <Checkbox
                checked={
                  selectedItem?.filter(
                    (searchItem: any) => searchItem === item?.title
                  )?.length > 0
                }
              />
              <ListItemText primary={item.title} />
            </MenuItem>
          ))}
        </Select>
      )}
    </FormControl>
  );
};
export const MUISelect = withChildren(MUISelectComponent);

It is register in my main file

Builder.registerComponent(MUISelect, MUISelectOptions)

Here is it’s options

import { ReactNode } from "react";

export interface IMUISelect {
  itemHeight?: string;
  itemPaddingTop?: string;
  tag?: string;
  itemWidth?: string;
  width?: string;
  height?: string;
  margin?: string;
  children?: ReactNode;
  multiple?: boolean;
  paramName?: string;
  options?: Array<{ option: string }>;
}

export const MUISelectOptions = {
  name: "MUISelect",
  noWrap: true,
  inputs: [
    {
      name: "itemHeight",
      type: "string",
    },
    {
      name: "itemPaddingTop",
      type: "string",
    },
    {
      name: "tag",
      type: "string",
    },
    {
      name: "itemWidth",
      type: "string",
    },
    {
      name: "width",
      type: "string",
    },
    {
      name: "height",
      type: "string",
    },
    {
      name: "margin",
      type: "string",
    },
    {
      name: "paramName",
      type: "string",
    },
    {
      name: "options",
      type: "list",
      subFields: [
        {
          name: "option",
          type: "string",
        },
      ],
    },
  ],
};

[manish-sharma]

Hello @hafiz,

To access custom component data within the builder you might want to use React Context or BuilderStoreContext to set the value into a context that can be accessed in the builder like shown in the below forum post

How to access data from Builder in a React Custom Component

Often times you will want to access state data from Builder inside your custom components, either to bind a state value to some part your component, or to affect the rendering of your custom component based on state inputs. There are a number of ways you can do this within Builder, many using native features of React itself. Below, we have outlined a number of ways: 1. Using React Context React provides Context to share global variables without having to pass props between parent and child. U…

Let us know if you have any further questions. Thank you!