Custom Qwik Components

[domcogan]

Has anyone tried to use custom components with Qwik.js? I just got it up and running and now I cant seem to use custom coded components. It looks like its well documented for Next.js but that uses react and Qwik.js does not I added the dependency by it self and well that fix this issue but threw up another one about react.

[TimG]

Hi @domcogan ! Thank you for the feedback on our documentation with Qwik, this is definitely something we are looking to improve. How are you integrating your custom component? You can see some examples in the links below:

Qwik & Firebase Integration Help

See this code example: import { component$, Resource, useResource$ } from "@builder.io/qwik"; import { useLocation } from "@builder.io/qwik-city"; import { getContent, RenderContent, getBuilderSearchParams, RegisteredComponent, } from "@builder.io/sdk-qwik"; export const BUILDER_PUBLIC_API_KEY = "KEY"; // ggignore export const MODEL = "content-page"; export default component$(() => { const location = useLocation(); const builderContentRsrc = useResource$<any>(() => { return get…

How to avoid caching small user-specific components when using SSR

hey @Tom360 we are in the process of building out our Qwik / Builder SDK docs, but the code for adding custom components in our Qwik SDK is the same as our other Mitosis-generated starters, which can be found here: builder/packages/sdks/output at main · BuilderIO/builder · GitHub A quick example of a custom component based on the Qwik starter outlined here could look something like this: import { component$, Resource, useResource$ } from "@builder.io/qwik"; import { useLocation } from "@build…

But essentially within your <RenderContent/> component, you just pass your custom components as an array of objects the define input fields for Builder, something like this:

export const MyCustomComponent = component$((props) => {

  return (
    <div>{props?.text}</div>
  );
});

export const CUSTOM_COMPONENTS = [
  {
    component: MyCustomComponent, //the name of your component in code
    name: 'My Custom Component', //the name of component that will display in Builder
    inputs: [{name: 'text', type: 'string'}] //definition of the various inputs for your component
  }
]
...

<RenderContent
  model={MODEL}
  content={content}
  apiKey={BUILDER_PUBLIC_API_KEY}
  customComponents={CUSTOM_COMPONENTS}
/>

Hope this helps, let me know if you have any questions or if you’d like to share a code snippet where you are having trouble we can look into it