@acusti/input-text/dist/InputText.d.ts

React component that renders a semi-controlled input with multiLine and selectTextOnFocus support

import { ChangeEvent, CSSProperties, FocusEvent, InputHTMLAttributes, KeyboardEvent } from 'react';
export type InputElement = HTMLInputElement | HTMLTextAreaElement;
export type Props = {
    autoCapitalize?: 'characters' | 'none' | 'off' | 'sentences' | 'words';
    autoComplete?: HTMLInputElement['autocomplete'];
    autoFocus?: boolean;
    className?: string;
    disabled?: boolean;
    /**
     * If true, input renders as readonly initially and only becomes interactive
     * when double-clicked or when user focuses the readonly input and then
     * presses the enter key. Likewise, the input becomes readonly again when
     * it is blurred or when the user presses enter or escape.
     */
    doubleClickToEdit?: boolean;
    enterKeyHint?: InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
    form?: string;
    id?: string;
    /**
     * The initial value of the text input. If props.initialValue changes at
     * any point, the new value will override the local state of the input.
     */
    initialValue?: string;
    list?: string;
    max?: number;
    maxHeight?: number | string;
    maxLength?: number;
    min?: number;
    minLength?: number;
    /**
     * If true, input renders as a <textarea> that automatically grows and
     * shrinks vertically to adjust to the length of its contents.
     */
    multiLine?: boolean;
    multiple?: boolean;
    name?: string;
    onBlur?: (event: FocusEvent<InputElement>) => unknown;
    onChange?: (event: ChangeEvent<InputElement>) => unknown;
    /**
     * Custom change handler that only receives the changed value as an argument.
     * Enables passing a state setter function directly, e.g. onChangeValue={setValue}.
     */
    onChangeValue?: (value: string) => unknown;
    onFocus?: (event: FocusEvent<InputElement>) => unknown;
    onKeyDown?: (event: KeyboardEvent<InputElement>) => unknown;
    onKeyUp?: (event: KeyboardEvent<InputElement>) => unknown;
    pattern?: string;
    placeholder?: string;
    readOnly?: boolean;
    required?: boolean;
    rows?: number;
    /** If true, the contents of the input are selected when it’s focused. */
    selectTextOnFocus?: boolean;
    size?: number;
    step?: number;
    style?: CSSProperties;
    /**
     * If true, pressing enter/return submits the <form> that the input is a
     * part of, or else blurs the input if no form is found.
     */
    submitOnEnter?: boolean;
    tabIndex?: number;
    title?: string;
    type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
};
declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
export default _default;