@snack-uikit/search-private

Search Private

Installation

npm i @snack-uikit/search-private

Changelog

Description

• Пакет @snack-uikit/search-private предоставляет компонент SearchPrivate для реализации поисковых полей в интерфейсе.
• Компонент является внутренним (private) и предназначен для использования внутри других пакетов UI Kit (например, Search, Toolbar), а не напрямую в приложениях.
• SearchPrivate представляет собой поисковое поле с иконкой поиска в префиксе, кнопкой очистки значения в постфиксе и поддержкой состояния загрузки (отображается индикатор загрузки вместо иконки поиска).
• Компонент поддерживает различные размеры (size: 's' | 'm' | 'l'), управляется через пропы value и onChange, поддерживает обработчики фокуса (onFocus, onBlur) и подтверждения поиска по Enter (onSubmit).
• Кнопка очистки значения появляется автоматически при наличии текста в поле и позволяет быстро очистить введённый поисковый запрос с сохранением фокуса на поле ввода.
• Компонент использует InputPrivate в качестве базового элемента и поддерживает все стандартные пропы для работы с полем ввода.

Example

import { useState } from 'react';
import { SearchPrivate } from '@snack-uikit/search-private';

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

  const handleSubmit = (searchValue: string) => {
    // Логика подтверждения поиска
    console.log('Search submitted:', searchValue);
  };

  return (
    <SearchPrivate
      value={value}
      onChange={setValue}
      loading={loading}
      onSubmit={handleSubmit}
      size="m"
      placeholder="Поиск..."
    />
  );
}

SearchPrivate

Props