@snack-uikit/toggles

Checkbox, Radio, Switch и Favorite

Компоненты, реализующие переключатели.

Installation

npm i @snack-uikit/toggles

Changelog

хук useToggleGroup

Хук для элементов внутри группы переключателей.

Аргументы

value: string

Уникальное значение для элемента в группе

  function ToggleCard(props: ToggleCardProps) {
    const { isChecked, handleClick, multipleSelection } = useToggleGroup(props.id);

    return (
      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
    );
  }

Примеры:

ToggleGroup

  const [value, setValue] = useState<string | undefined>(undefined);

  function ToggleCard(props: ToggleCardProps) {
    const { isChecked, handleClick, multipleSelection } = useToggleGroup(id);

    return (
      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
    );
  }

  // ITEMS -some array with ToggleCardProps
  
  // ...

  return (
    <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
      {ITEMS.map(props => (
        <ToggleCard key={props.id} {...props} />
      ))}
    </ToggleGroup>
  );

// ...

return (
  <>
    {items.map(({ checked, setChecked, data }) =>
      <CustomRadioButton
        // повторяет нативное поведение радиогруппы: по клику можно выбрать, но нельзя снять выбор
        onClick={() => setChecked(true)}
        checked={checked}
        data={data}
      />
    )}
  </>
);

Checkbox

Props

name	type	default value	description
id	string	-	HTML-аттрибут id
name	string	-	HTML-аттрибут name
value	string	-	HTML-аттрибут value
tabIndex	number	-	HTML-аттрибут tab-index
autofocus	boolean	-	HTML-аттрибут autofocus
checked	boolean	-	HTML-аттрибут checked
defaultChecked	boolean	-	HTML-аттрибут checked по-умолчанию
disabled	boolean	-	HTML-аттрибут disabled
onChange	(checked: boolean) => void	-	Колбек смены значения
onClick	MouseEventHandler<HTMLInputElement>	-	Колбек клика
onBlur	FocusEventHandler<HTMLInputElement>	-	Колбек потери фокуса
onFocus	FocusEventHandler<HTMLInputElement>	-	Колбек приобретения фокуса
className	string	-	CSS-класс
size	enum Size: "s", "m"	m	Размер
inputRef	RefObject<HTMLInputElement>	-
indeterminate	boolean	-	Состояние частичного выбора
indeterminateDefault	boolean	-	Состояние частичного выбора по-умолчанию

Switch

Props

name	type	default value	description
id	string	-	HTML-аттрибут id
name	string	-	HTML-аттрибут name
value	string	-	HTML-аттрибут value
tabIndex	number	-	HTML-аттрибут tab-index
autofocus	boolean	-	HTML-аттрибут autofocus
checked	boolean	-	HTML-аттрибут checked
defaultChecked	boolean	-	HTML-аттрибут checked по-умолчанию
disabled	boolean	-	HTML-аттрибут disabled
onChange	(checked: boolean) => void	-	Колбек смены значения
onClick	MouseEventHandler<HTMLInputElement>	-	Колбек клика
onBlur	FocusEventHandler<HTMLInputElement>	-	Колбек потери фокуса
onFocus	FocusEventHandler<HTMLInputElement>	-	Колбек приобретения фокуса
className	string	-	CSS-класс
size	enum Size: "s", "m"	m	Размер
inputRef	RefObject<HTMLInputElement>	-
showIcon	boolean	-	Показывать ли иконку в переключателе
loading	boolean	-

Radio

Props

name	type	default value	description
id	string	-	HTML-аттрибут id
name	string	-	HTML-аттрибут name
value	string	-	HTML-аттрибут value
tabIndex	number	-	HTML-аттрибут tab-index
autofocus	boolean	-	HTML-аттрибут autofocus
checked	boolean	-	HTML-аттрибут checked
defaultChecked	boolean	-	HTML-аттрибут checked по-умолчанию
disabled	boolean	-	HTML-аттрибут disabled
onChange	(checked: boolean) => void	-	Колбек смены значения
onClick	MouseEventHandler<HTMLInputElement>	-	Колбек клика
onBlur	FocusEventHandler<HTMLInputElement>	-	Колбек потери фокуса
onFocus	FocusEventHandler<HTMLInputElement>	-	Колбек приобретения фокуса
className	string	-	CSS-класс
size	enum Size: "s", "m"	-	Размер
inputRef	RefObject<HTMLInputElement>	-

Favorite

Props

name	type	default value	description
id	string	-	HTML-аттрибут id
name	string	-	HTML-аттрибут name
value	string	-	HTML-аттрибут value
tabIndex	number	-	HTML-аттрибут tab-index
autofocus	boolean	-	HTML-аттрибут autofocus
checked	boolean	-	HTML-аттрибут checked
defaultChecked	boolean	-	HTML-аттрибут checked по-умолчанию
onChange	(checked: boolean) => void	-	Колбек смены значения
onClick	MouseEventHandler<HTMLInputElement>	-	Колбек клика
onBlur	FocusEventHandler<HTMLInputElement>	-	Колбек потери фокуса
onFocus	FocusEventHandler<HTMLInputElement>	-	Колбек приобретения фокуса
className	string	-	CSS-класс
size	enum Size: "s", "m"	m	Размер
inputRef	RefObject<HTMLInputElement>	-
icon	enum FavoriteIcon: "star", "heart"	heart	Иконка

ToggleGroup

Props

name	type	default value	description
children*	ReactNode	-	Вложенный контент
defaultValue	string | string[]	-	Начальное состояние
value	string | string[]	-	Controlled состояние
onChange	((value: string) => void) | ((value: string[]) => void)	-	Controlled обработчик измения состояния
selectionMode	"single" | "multiple"	single	Режим выбора

useToggleGroup

Props

name	type	default value	description
value*	string	-