@snack-uikit/input-private

Input Private

Installation

npm i @snack-uikit/input-private

Changelog

Description

• Пакет @snack-uikit/input-private предоставляет базовый компонент InputPrivate для создания полей ввода в составе других компонентов библиотеки (например, FieldText, FieldSecure, FieldSelect).
• Компонент является внутренним (private) и предназначен для использования внутри других пакетов UI Kit, а не напрямую в приложениях.
• InputPrivate представляет собой обёртку над нативным HTML-элементом <input> с поддержкой всех стандартных атрибутов и событий, а также дополнительных возможностей: различные типы ввода (text, password, number, tel, email, url), режимы работы экранной клавиатуры (inputMode), управление автозаполнением, проверка орфографии и валидация через pattern.
• Пакет также экспортирует вспомогательные хуки (useButtonNavigation, useClearButton) и утилиты (moveCursorToEnd, selectAll, runAfterRerender, isCursorInTheBeginning, isCursorInTheEnd) для расширенной работы с полями ввода, включая навигацию по кнопкам с клавиатуры и управление курсором.

Example

import { useState } from 'react';
import { InputPrivate } from '@snack-uikit/input-private';

function Example() {
  const [value, setValue] = useState('');

  return (
    <InputPrivate
      value={value}
      onChange={setValue}
      placeholder="Введите текст"
      type="text"
      inputMode="text"
      maxLength={100}
      autoComplete="off"
    />
  );
}

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	Тип инпута
inputMode	enum InputMode: "text", "tel", "email", "url", "decimal", "numeric", "search", "none"	text	Режим работы экранной клавиатуры
disabled	boolean	-	Является ли поле деактивированным
readonly	boolean	-	Является ли поле доступным только для чтения
autoComplete	string | boolean	false	Включен ли автокомплит для поля
autoFocus	boolean	-	Включен ли авто-фокус для поля
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>	-	Колбек обработки нажатия кнопки мыши
spellCheck	boolean	true	Значение атрибута spellcheck (проверка орфографии)
pattern	string	-	Регулярное выражение валидного инпута
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

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