tivex/dist/flow.d.ts

A Small, JSX library for creating Reactive-UIs.

import { FC, JSXNode, JSXProps } from 'tivex';

/**
 * Suspense component to handle asynchronous rendering of its children.
 * It accepts a `fallback` prop which is a JSX element to render while the children are being rendered asynchronously.
 * The children can be any valid JSX elements, including components that return promises.
 * @param props - The props for the Suspense component.
 * @param props.fallback - A fallback JSX element to render while the children are being rendered
 * @returns JSX.Element
 * @example
 * <Suspense fallback={<div>Loading...</div>}>
 *   <AsyncComponent />
 * </Suspense>
 */
declare const Suspense: FC<{
    fallback?: JSXNode;
}>;
/**
 * For component to iterate over an array and render its children for each item.
 * It accepts an `each` prop which is an array of items, a `fallback` prop which is a JSX element to render if the `each` array is empty,
 * and a `children` prop which is a function that takes an item from the `each` array, its index, and the entire array as arguments, and returns a JSX element to render for each item.
 * @param props - The props for the For component.
 * @param props.each - An array of items to iterate over.
 * @param props.fallback - A fallback JSX element to render if the `each` array is empty.
 * @param props.children - A function that takes an item from the `each` array, its index, and the entire array as arguments, and returns a JSX element to render for each item.
 * @returns JSX.Element
 * @example
 * <For each={state.items} fallback={<div>No items</div>}>
 *   {(item, index) => (
 *     <div key={item.id}>
 *       <p>{item.name}</p>
 *       <span>Index: {index}</span>
 *     </div>
 *   )}
 * </For>
 */
declare const For: <T extends Array<any>>(props: {
    each: T;
    fallback?: JSX.Element;
    children: (data: T[number], index: number & {
        peek(): number;
    }, thisArr: T) => JSX.Element;
}) => JSX.Element;
/**
 * Show component to conditionally render its children based on a condition.
 * If the `when` prop is true, it renders the children; otherwise, it renders
 * the `fallback` prop.
 * @param props - The props for the Show component.
 * @param props.when - A condition that determines whether to render the children or the fallback.
 * @param props.fallback - A fallback JSX element to render if the condition is false.
 * @returns JSX.Element
 * @example
 * <Show when={condition} fallback={<div>No Match</div>}>
 *   <div>Content to show when condition is true</div>
 * </Show>
 */
declare const Show: FC<{
    when: any;
    fallback?: JSX.Element;
}>;
/**
 * Switch component to render one of its children based on a condition.
 * It will render the first child whose `when` prop returns true.
 * If no child matches the condition, it will render the `fallback` prop.
 * @param props - The props for the Switch component.
 * @param props.fallback - The fallback JSX element to render if no child matches the condition.
 * @param props.children - The child components, each with a `when` prop that is a function returning a boolean value.
 * @returns JSX.Element
 * @example
 * <Switch fallback={<div>No match</div>}>
 *   <Match when={condition1}>child1</Match>
 *   <Match when={condition2}>child2</Match>
 *   <Match when={condition3}>child3</Match>
 * </Switch>
 */
declare const Switch: (props: JSXProps<{
    fallback?: JSX.Element;
}>) => JSX.Element;
/**
 * Match component to conditionally render its children based on a condition.
 * It is used within a Switch component to determine which child to render.
 * @param props - The props for the Match component.
 * @param props.when - A condition that determines whether to render the children.
 */
declare const Match: FC<{
    when: boolean;
}>;
/**
 * ErrorBoundary component to catch errors in the child components.
 * It renders a fallback UI when an error occurs.
 * @param children - The child components to render.
 * @param fallback - A function that takes an error and returns a JSX element to render
 * @returns JSX.Element
 * @example
 * <ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
 *   <ChildComponent />
 * </ErrorBoundary>
 */
declare const ErrorBoundary: FC<{
    fallback: (err: Error) => JSX.Element;
}>;
/**
 * Throw component to throw an error.
 * It is used to throw an error in the component tree.
 * @param error - The error to throw, can be an instance of Error or a string.
 * @throws {Error} Throws the provided error.
 * @example
 * <Throw error='Something went wrong' />
 */
declare const Throw: FC<{
    error: Error | string;
}>;

export { ErrorBoundary, For, Match, Show, Suspense, Switch, Throw };