Function createCustomElement

Turns a React component into a DOM Custom Element.

Remark

You probably will want to customElements.define() in order to use it in your HTML.

  • createCustomElement<const PropNamesArray>(propNames, Component, __namedParameters?): CustomElementConstructor

  • Type Parameters

    • const PropNamesArray extends readonly string[]

    Parameters

    • propNames: PropNamesArray

      An array of the attributes that your custom element will accept and react to.

    • Component: ComponentType<{
          [PropName in string]?: string
      } & {
          children: ReactNode;
      }>

      Your React component. It will get the props declared in the propNames argument, and any updates to them.

      It will also get a children prop with the <slot> component.

    • __namedParameters: {
          reactRootOptions?: RootOptions;
          shadowRootOptions?: ShadowRootInit;
      } = {}

      Any options you want to pass to the DOM's attachShadow and React's createRoot.

      • OptionalreactRootOptions?: RootOptions
      • OptionalshadowRootOptions?: ShadowRootInit

    Returns CustomElementConstructor

Settings

Member Visibility