Mantine alert system

Alert system based on Mantine components.

demo

Installation

# With yarn
yarn add mantine-alert-system @mantine/core @mantine/hooks

# With npm
npm install mantine-alert-system @mantine/core @mantine/hooks

Usage

Cross faded switch single alert

import { Button } from "@mantine/core";
import { useAlertSwitch } from "mantine-alert-system";

const SwitchedAlert = () => {
  const [alert, { show, hide }] = useAlertSwitch();
  return (
    <>
      <Button
        size="xs"
        mb="md"
        onClick={() =>
          show({
            inline: true,
            children: "Message Content",
          })
        }
      >
        Show Alert
      </Button>
      {alert}
    </>
  );
};

Stacked multiple alert

import { Button } from "@mantine/core";
import { useAlertStack } from "mantine-alert-system";

const StackedAlert = () => {
  const [alerts, { show, hide }] = useAlertStack();
  return (
    <>
      <Button
        size="xs"
        mb="md"
        onClick={() =>
          show({
            inline: true,
            children: "Message Content",
          })
        }
      >
        Show Alert
      </Button>
      {alerts}
    </>
  );
};

With severity

Optionally use severity [success, info, warning, error] with no hassle

import { Button } from "@mantine/core";
import {
  useAlertSwitch,
  useAlertStack,
  useAlertSeverity,
} from "mantine-alert-system";

const SwitchedAlertWithSeverity = () => {
  const [alert, { show, hide }] = useAlertSwitch();
  const showAlert = useAlertSeverity(show);
  return (
    <>
      <Button
        size="xs"
        mb="md"
        onClick={() =>
          showAlert.error({
            inline: true,
            children: "Message Content",
          })
        }
      >
        Show Alert
      </Button>
      {alert}
    </>
  );
};

const StackedAlertWithSeverity = () => {
  const [alerts, { show, hide }] = useAlertStack();
  const showAlert = useAlertSeverity(show);
  return (
    <>
      <Button
        size="xs"
        mb="md"
        onClick={() =>
          showAlert.warning({
            inline: true,
            children: "Message Content",
          })
        }
      >
        Show Alert
      </Button>
      {alerts}
    </>
  );
};

Custom transition

Use predefined transitions [RAISE_TRANSITION, FALL_TRANSITION, SCALE_TRANSITION] or create your own transition with custom function

import { Button } from "@mantine/core";
import {
  useAlertSwitch,
  useAlertStack,
  useAlertSeverity,
  RAISE_TRANSITION,
} from "mantine-alert-system";

// use predefined transition
const SwitchedAlertWithCustomTransition = () => {
  const [alert, { show, hide }] = useAlertSwitch({
    transitionDuration: 300,
    transition: RAISE_TRANSITION,
  });
  const showAlert = useAlertSeverity(show);
  return (
    <>
      <Button
        size="xs"
        mb="md"
        onClick={() =>
          showAlert.error({
            inline: true,
            children: "Message Content",
          })
        }
      >
        Show Alert
      </Button>
      {alert}
    </>
  );
};

// use custom function
const StackedAlertWithCustomTransition = () => {
  const [alerts, { show, hide }] = useAlertStack({
    transitionDuration: 300,
    transition: (status) => ({
      transform: `scaleY(${status === 'entered' ? 1 : 0})`,
    }),
  });
  const showAlert = useAlertSeverity(show);
  return (
    <>
      <Button
        size="xs"
        mb="md"
        onClick={() =>
          showAlert.warning({
            inline: true,
            children: "Message Content",
          })
        }
      >
        Show Alert
      </Button>
      {alerts}
    </>
  );
};