Skip to content

SnackMessage Component

Description

The SnackMessage component displays temporary alert messages (snack messages) that disappear after a set duration. These messages provide feedback for user actions and support different severity levels.

Usage

The component is used globally and does not require props. It automatically retrieves and displays messages from the application's context.

Behavior

  • Displays messages from the application context.
  • Automatically removes messages after 6 seconds.
  • Supports different severity levels (info, success, warning, error).
  • Can be dismissed manually.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { SnackMessage } from "@nomana-it/liberty-core"
import { useAppContext } from "@ly_context/AppProvider";
import { ESeverity } from "@ly_types/common";

export const Example = () => {
  const { addSnackMessage } = useAppContext();

  useEffect(() => {
    addSnackMessage("Export of table has started", ESeverity.warning);
  }, []);

  return (
    <div>
      {/* This component should be placed at the root level to display messages globally */}
      <SnackMessage />
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core