QwikPreact allows adding Preact components into existing Qwik application
Integration is pretty much the same as https://qwik.builder.io/docs/integrations/react/.
First, install @qwikdev/qwik-preact with npm, pnpm or yarn. Instead of react and react-dom, you will need to install preact and preact-render-to-string. And don't forgot /** @jsxImportSource preact */
preact.tsx
/** @jsxImportSource preact */
import { qwikify$ } from '@qwikdev/qwik-preact';
import { useState } from 'preact/hooks';
// Create Preact component standard way
function Counter() {
const [count, setCount] = useState(0);
return (
<button className="preact" onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
// Convert Preact component to Qwik component
export const QCounter = qwikify$(Counter, { eagerness: 'hover' });index.tsx
import { component$ } from '@builder.io/qwik';
import { QCounter } from './preact';
export default component$(() => {
return (
<main>
<QCounter />
</main>
);
});vite.config.ts
// vite.config.ts
import { qwikPreact } from '@qwikdev/qwik-preact/vite';
export default defineConfig(() => {
return {
...,
plugins: [
...,
// The important part
qwikPreact()
],
};
});Please keep in mind that this is an experimental implementation based on qwik-react implementation. So, there might be bugs and unwanted behaviours.