@n3/react-remove-button

Remove button component for react applications based on @n3/kit

Usage no npm install needed!

<script type="module">
  import n3ReactRemoveButton from 'https://cdn.skypack.dev/@n3/react-remove-button';
</script>

README

@n3/react-remove-button

Кнопка удаления для приложений на базе @n3/kit.

import {
  RemoveButton,
} from '@n3/react-remove-button';

Props

Название Обязательность Тип Значение по умолчанию Описание
color enum
- buttonColors.DEFAULT
- buttonColors.PRIMARY
- buttonColors.TERTIARY
- buttonColors.DANGER		 undefined Цвет кнопки
size enum
- buttonSizes.DEFAULT
- buttonSizes.SMALL		 undefined Размер кнопки
disabled bool false Выключена ли кнопка
children + node
remove + func Асинхронная функция удаления
onRemoveSuccess func undefined Обработчик успешного удаления
approveTitle node undefined Заголовок подтверждения
approveContent node undefined Текст подтверждения
approveButtonText + string Текст кнопки подтвеждения
approveButtonColor enum
- buttonColors.DEFAULT
- buttonColors.PRIMARY
- buttonColors.TERTIARY
- buttonColors.DANGER		 buttonColors.DANGER Цвет кнопки подтверждения
cancelButtonText + string Текст кнопки отмены
errorsPath string 'response.data.detail' Путь до объекта ошибкок в случае ошибки удаления
redirectTo any undefined Адрес редиректа в случае успешного удаления
notification object undefined Сообщение @n3/browser-messages в случае успешного удаления

Создание кастомной кнопки удаления

import type {
  FC,
  ReactNode,
} from 'react';
import {
  useRemoveButton,
} from '@n3/react-remove-button';
import type {
  UseRemoveButtonParams,
} from '@n3/react-remove-button';

type CustomRemoveButtonProps = UseRemoveButtonParams & {
  children?: ReactNode;
};

const CustomRemoveButton: FC<CustomRemoveButtonProps> = (props) => {
  const {
    children,
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  } = props;

  const {
    isRemoving,
    onClick,
  } = useRemoveButton({
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  });

  return (
    <button
      type="button"
      disabled={isRemoving}
      onClick={onClick}
    >
      {children}
    </button>
  );
};