@snack-uikit/input-private

Input Private

Installation

npm i @snack-uikit/input-private

Changelog

export type Type = 'text' | 'password'

export type InputPrivateProps = RefAttributes<HTMLInputElement> &
  WithSupportProps<{
    name?: string;
    value: string;
    onChange?(value: string, e?: ChangeEvent<HTMLInputElement>): void;
    id?: string;
    className?: string;
    placeholder?: string;
    type?: Types;
    disabled?: boolean;
    autoComplete?: boolean;
    maxLength?: number;
    onFocus?: FocusEventHandler<HTMLInputElement>;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    prefix?: ReactNode;
    postfix?: ReactNode;
    onClick?: MouseEventHandler<HTMLInputElement>;
    onMouseDown?: MouseEventHandler<HTMLInputElement>;
  }>;

InputPrivate

Props

name	type	default value	description
name	string	-	Значение html-атрибута name
value	string	-	Значение input
onChange	(value: string, e?: ChangeEvent<HTMLInputElement>) => void	-	Колбек смены значения
placeholder	string	-	Значение плейсхолдера
id	string	-	Значение html-атрибута id
className	string	-	CSS-класс
type	enum Type: "number", "text", "password", "tel", "email", "url"	text	Тип инпута
disabled	boolean	-	Является ли поле деактивированным
readonly	boolean	-	Является ли поле доступным только для чтения
autoComplete	string | boolean	false	Включен ли автокомплит для поля
maxLength	number	-	Максимальная длина вводимого значения
min	number	-	Минимальное значение поля
max	number	-	Максимальное значение поля
step	string | number	-	Максимальное значение поля
onFocus	FocusEventHandler<HTMLInputElement>	-	Колбек обработки получения фокуса
onBlur	FocusEventHandler<HTMLInputElement>	-	Колбек обработки потери фокуса
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	Колбек обработки начала нажатия клавиши клавиатуры
onPaste	ClipboardEventHandler<HTMLInputElement>	-	Колбек обработки вставки значения
tabIndex	number	-	Значение атрибута tab-index
onClick	MouseEventHandler<HTMLInputElement>	-	Колбек обработки клика
onMouseDown	MouseEventHandler<HTMLInputElement>	-	Колбек обработки нажатия кнопки мыши
key	Key	-
ref	LegacyRef<HTMLInputElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

useButtonNavigation

hook

Позволяет использовать клавиатуру для навигации по элементам управления

useClearButton

hook

Позволяет использовать кнопку сброса значения

moveCursorToEnd

helper

Переносит курсор в конец поля ввода

selectAll

helper

Выделяет весь текст в поле ввода

runAfterRerender

helper

Откладывает колбек на следующий цикл EventLoop

isCursorInTheBeginning

helper

Проверяет находится ли курсор в начале поля ввода

isCursorInTheEnd

helper

Проверяет находится ли курсор в конце поля ввода