@askrjs/askr/control

Casetype

Case: (props: CaseProps) => JSXElement

Render the first matching {@link Match} child (by when), or fallback if none match.

CasePropstype

CaseProps: {
  fallback?: BoundaryChild;
  children?: unknown;
}

Props for {@link Case}.

children

children?: unknown;

fallback

fallback?: RenderableChild;

Fortype

For: { <T, K extends string | number = string | number>(props: ForGetterProps<T, K>): JSXElement; <T, K extends string | number = string | number>(props: ForProps<T, K>): JSXElement; }

Render a keyed or indexed list, reconciling items by key instead of position.

ForGetterPropstype

ForGetterProps: Omit<
  ForBaseProps<T>,
  'each'
> & { each: ForEachGetter<T> } & ForKeying<T, K>

{@link ForProps} with a getter each. A state() getter is also an array ([getter, setter]), so For tries this form first and reads it as a getter.

by

by?: ((item: T, index: number) => K) | undefined;

byIndex

byIndex?: true | undefined;

children

Row renderer. Existing rows rerun with the latest callback when the parent rerenders, and a reactive read in the callback subscribes that row. Prefer `selector()` or thunk props so only the affected rows or props update.

each

each: ForEachGetter<T>;

fallback

fallback?: RenderableChild;

ForPropstype

ForProps: | KeyedForProps<T, K>
  | IndexedForProps<T>

Props for {@link For}.

by

by?: ((item: T, index: number) => K) | undefined;

byIndex

byIndex?: true | undefined;

children

Row renderer. Existing rows rerun with the latest callback when the parent rerenders, and a reactive read in the callback subscribes that row. Prefer `selector()` or thunk props so only the affected rows or props update.

each

each: ForEachSource<T>;

fallback

fallback?: RenderableChild;

Matchtype

Match: (_props: MatchProps) => null

Declares one branch of a {@link Case}; only valid as its direct child.

MatchPropstype

MatchProps: {
  key?: string | number | null;
  when: unknown;
  children: MatchChild;
}

Props for {@link Match}, valid only as a direct child of {@link Case}.

children

children: MatchChild;

key

key?: string | number | null | undefined;

when

when: unknown;

Showtype

Show: <T>(props: ShowProps<T>) => JSXElement

Conditionally render children based on when, narrowing truthy values for the render function form.

ShowPropstype

ShowProps: {
  when: ShowSource<T>;
  fallback?: BoundaryChild;
  children: BoundaryChild | ((value: Truthy<T>) => BoundaryChild);
}

Props for {@link Show}.

children

children: RenderableChild | ((value: Truthy<T>) => BoundaryChild);

fallback

fallback?: RenderableChild;

when

when: ShowSource<T>;