https://github.com/qwikdev/qwik-preact
QwikPreact allows adding Preact components into existing Qwik application
https://github.com/qwikdev/qwik-preact
Last synced: 8 months ago
JSON representation
QwikPreact allows adding Preact components into existing Qwik application
- Host: GitHub
- URL: https://github.com/qwikdev/qwik-preact
- Owner: QwikDev
- Created: 2023-07-01T12:48:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-02T13:25:43.000Z (over 2 years ago)
- Last Synced: 2025-04-28T01:35:07.820Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# qwik-preact ⚡️
QwikPreact allows adding Preact components into existing Qwik application
## How to Integrate into a Qwik app
Integration is pretty much the same as .
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
```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 (
setCount(count + 1)}>
Count: {count}
);
}
// Convert Preact component to Qwik component
export const QCounter = qwikify$(Counter, { eagerness: 'hover' });
```
index.tsx
```tsx
import { component$ } from '@builder.io/qwik';
import { QCounter } from './preact';
export default component$(() => {
return (
);
});
```
vite.config.ts
```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.
---
## Related
- [Qwik Docs](https://qwik.builder.io/docs/)
- [Qwik on GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Discord](https://qwik.builder.io/chat)
- [Vite](https://vitejs.dev/)
- [Partytown](https://partytown.builder.io/)
- [Mitosis](https://github.com/BuilderIO/mitosis)
- [Builder.io](https://www.builder.io/)