Component / ComponentProps / FlowComponent / FlowProps / ParentComponent / ParentProps / Ref / ValidComponent / VoidComponent / VoidProps

A general Component has no implicit children prop. If desired, specify one explicitly, e.g. Component<{ name: string; children: Element }>.

Import

import type { Component } from "solid-js";

Type signature

type Component<P extends Record<string, any> = {}> = (props: P) => SolidElement;

Takes the props of the passed component and returns its type

Intrinsic element prop extraction is renderer-specific and lives in renderer packages such as @solidjs/web.

Import

import type { ComponentProps } from "solid-js";

Type signature

type ComponentProps<T extends ValidComponent> =
  T extends Component<infer P> ? P : never;

FlowComponent requires a children prop with the specified type. Use this for components where you need a specific child type, typically a function that receives specific argument types.

Import

import type { FlowComponent } from "solid-js";

Type signature

type FlowComponent<
  P extends Record<string, any> = {},
  C = SolidElement,
> = Component<FlowProps<P, C>>;

Extend props to require a children prop with the specified type. Use this for components where you need a specific child type, typically a function that receives specific argument types.

Import

import type { FlowProps } from "solid-js";

Type signature

type FlowProps<P extends Record<string, any> = {}, C = SolidElement> = P & {
  children: C;
};

ParentComponent allows an optional children prop. Use this for components that you want to accept children.

Import

import type { ParentComponent } from "solid-js";

Type signature

type ParentComponent<P extends Record<string, any> = {}> = Component<
  ParentProps<P>
>;

Extend props to allow optional Solid children. Use this for components that you want to accept children.

Import

import type { ParentProps } from "solid-js";

Type signature

type ParentProps<P extends Record<string, any> = {}> = P & {
  children?: SolidElement;
};

Type of props.ref, for use in Component or props typing.

Import

import type { Ref } from "solid-js";

Type signature

type Ref<T> = T | ((val: T) => void);

Examples

Component<{ ref: Ref<Element> }>;

ValidComponent API reference.

Import

import type { ValidComponent } from "solid-js";

Type signature

type ValidComponent = Component<any>;

VoidComponent forbids the children prop. Use this to prevent accidentally passing children to components that would silently throw them away.

Import

import type { VoidComponent } from "solid-js";

Type signature

type VoidComponent<P extends Record<string, any> = {}> = Component<
  VoidProps<P>
>;

Extend props to forbid the children prop. Use this to prevent accidentally passing children to components that would silently throw them away.

Import

import type { VoidProps } from "solid-js";

Type signature

type VoidProps<P extends Record<string, any> = {}> = P & { children?: never };