Retrieve all Design Components in a Framer X document

designComponentsDropdown.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

// Step 1: Import all exported values and put them on designComponents variable
import * as designComponents from "./canvas";

// Step 2. Filter out the functions only (skip the __info__ variable)
// In the future this might need better typechecking might canvas.ts change
const components = Object.keys(designComponents).filter(
  k => typeof designComponents[k] == "function"
);

// Step 3. const components is now an Array of strings containing all Design Component names
// You can access the components itself using designComponents[enter component name here]

const style: React.CSSProperties = {
  height: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  textAlign: "center",
  color: "#8855FF",
  background: "rgba(136, 85, 255, 0.1)",
  overflow: "hidden"
};

// Define type of property
interface Props {
  component: string;
}

export class getDesignComponents extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    component: "None"
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    component: {
      type: ControlType.Enum,
      options: ["— Select a component —", ...components],
      title: "Component"
    }
  };

  render() {
    return (
      <div style={style}>I found {components.length} Design Components</div>
    );
  }
}