@tegonal/portabletext-qwik
This is a Portable Text serializer for Qwik.
It creates Qwik components and basically offers the same features as the React serializer, since this is mostly based on @portabletext/react.
In a nutshell:
- Same custom components, just
component$instead ofReact.FC;) - Same handling of marks, lists, etc.
Thanks to the Portable Text team for the great work.
Installation
npm i @tegonal/portabletext-qwik
yarn add @tegonal/portabletext-qwikUsage
import {PortableText, PortableTextCustomComponents} from '@tegonal/portabletext-qwik';
import {component$} from "@builder.io/qwik";
import {components} from "../my-components";
import {PortableTextBlock} from "@portabletext/types";
type Props = {
blocks: PortableTextBlock[];
}
const components: PortableTextCustomComponents = {
// Add your custom Qwik components here
}
const QwikComponent = component$<Props>(({blocks}) => {
return (
<PortableText
value={blocks}
components={components}
/>
)
});Demo / Example usage
You can check out the demo page that uses Tailwind CSS and the wonderful DaisyUI for styling.
git clone git@github.com:tegonal/portabletext-qwik.git
cd portabletext-qwik
npm install
npm run devLicense
MIT © tegonal