@snack-uikit/toggles v0.13.14

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

Switch

Props

Radio

Props

Favorite

Props

ToggleGroup

Props

useToggleGroup

Props