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

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