Search code examples
reactjsqwik

How to use React components in Qwik?

Is it possible to use React components from a component library in Qwik framework?

I'm trying to use components from a dependency that i have installed but they are written in React.

Solution

  • In short: you can but should avoid it if you can and only should use it as a migration strategy. For more information: Use qwikify$() as a migration strategy

    QwikReact allows you to use React components in Qwik, including the whole ecosystem of component libraries.

    You need to install:

    npm run qwik add react

    The qwikify the component you want to use:

    /** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import { ReactComponent } from '@react/component/library';

export const Component = qwikify$(ReactComponent);

    Important: You need to import /** @jsxImportSource react */ at the top of your file, this is an instruction to the compiler to use React as the JSX factory.

    For more information see Qwik React.