@kform/react/types/components/FormattedValue.d.ts

React integration for KForm.

import { Path } from "@kform/core";
import * as React from "react";
import { FormatterControllerState, FormatterOptions } from "../hooks/useFormatter";
import { DistributedOmit } from "../utils/typeUtils";
/** Properties of the {@link FormattedValue} component. */
export type FormattedValueProps<T = unknown, TFormatted = T | undefined> = DistributedOmit<FormatterOptions<T, TFormatted>, "setFormattedValue"> & FormattedValueOwnProps<T, TFormatted>;
/** Own properties of the {@link FormattedValue} component. */
export interface FormattedValueOwnProps<T = unknown, TFormatted = T | undefined> {
    path?: Path | string;
    children?: (state: FormatterControllerState<T, TFormatted>) => React.ReactNode;
}
/**
 * Component used to display information about a form value. It can be used to
 * either simply display the form value (formatted as appropriate) or display
 * the value's state (such as dirty/touched status, issues, etc.).
 *
 * If intending to simply display the current value of a form value, use the
 * {@link format} property to configure how the value should be formatted. If no
 * {@link children} are provided, then the formatted value is rendered as-is when
 * it is a React element or converted to a string via
 * `formattedValue?.toString()` otherwise.
 *
 * This component is a wrapper around the {@link useFormattedValue} hook.
 *
 * Example displaying the value formatted as JSON:
 *
 * ```tsx
 * <FormattedValue
 *   path="/path/to/value"
 *   format={(value) => JSON.stringify(value)}
 * />;
 * ```
 *
 * Example displaying the value as a string, plus some of the value's state:
 *
 * ```tsx
 * <FormattedValue path="/path/to/value" format={(value) => String(value)}>
 *   {({ initialized, exists, formattedValue, dirty, touched }) => (
 *     <>
 *       {!initialized && "Loading..."}
 *       {initialized && !exists && "Value does not exist"}
 *       {initialized && exists && (
 *         <dl>
 *           <dt>Formatted value:</dt>
 *           <dd>{formattedValue}</dd>
 *
 *           <dt>Dirty:</dt>
 *           <dd>{dirty ? "Yes" : "No"}</dd>
 *
 *           <dt>Touched:</dt>
 *           <dd>{touched ? "Yes" : "No"}</dd>
 *         </dl>
 *       )}
 *     </>
 *   )}
 * </FormattedValue>;
 * ```
 */
export declare function FormattedValue<T = unknown, TFormatted = T | undefined>({ path, children, ...props }: FormattedValueProps<T, TFormatted>): import("react/jsx-runtime").JSX.Element;