API DOCS for: component.public.ts

---

component

Declare a Qwik component that can be used to create UI.

Use component (and component$) to declare a Qwik component. A Qwik component is a special kind of component that allows the Qwik framework to lazy load and execute the component independently of other Qwik components as well as lazy load the component's life-cycle hooks and event handlers.

Side note: You can also declare regular (standard JSX) components that will have standard synchronous behavior.

Qwik component is a facade that describes how the component should be used without forcing the implementation of the component to be eagerly loaded. A minimum Qwik definition consists of:

• Component onMount method, which needs to return an
• onRender closure which constructs the component's JSX.

Example:

An example showing how to create a counter component:

• component$ is how a component gets declared.
• { value?: number; step?: number } declares the public (props) interface of the component.
• { count: number } declares the private (state) interface of the component.
• onMount closure: is used to create the data store (see: useStore);
• $: mark which parts of the component will be lazy-loaded. (see $ for details.)

The above can then be used like so:

See also: component, onUnmount, onHydrate, onDehydrate, onHalt, onResume, on, onDocument, onWindow, useStyles, useScopedStyles

@param onMount - Initialization closure used when the component is first created.
@param tagName - Optional components options. It can be used to set a custom tag-name to be used for the component's host element.

@public

onRender

A lazy-loadable reference to a component's render hook.

See: component

@public

Example

@public

onUnmount

A lazy-loadable reference to a component's destroy hook.

Invoked when the component is destroyed (removed from render tree).

@public

onDehydrate

A lazy-loadable reference to a component's on dehydrate hook.

Invoked when the component's state is being serialized (dehydrated) into the DOM. This allows the component to do last-minute clean-up before its state is serialized.

Typically used with transient state.

@public

onHydrate

A lazy-loadable reference to a component's on hydrate hook.

Invoked when the component's state is re-hydrated from serialization. This allows the component to do any work to re-activate itself.

@public

onResume

A lazy-loadable reference to a component's on resume hook.

The hook is eagerly invoked when the application resumes on the client. Because it is called eagerly, this allows the component to hydrate even if no user interaction has taken place.

@public

styles

A lazy-loadable reference to a component's styles.

Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)

@public

on

Register a listener on the current component's host element.

Used to programmatically add event listeners. Useful from custom use* methods, which do not have access to the JSX.

See: on, onWindow, onDocument.

@public

onWindow

Register a listener on window.

Used to programmatically add event listeners. Useful from custom use* methods, which do not have access to the JSX.

See: on, onWindow, onDocument.

@public

onDocument

Register a listener on document.

Used to programmatically add event listeners. Useful from custom use* methods, which do not have access to the JSX.

See: on, onWindow, onDocument.

@public

useStyles

Refer to component styles.

@alpha

useScopedStyles

@alpha

PropsOf

Infers Props from the component.

@public