tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
49 lines (48 loc) • 2.9 kB
TypeScript
import React from "react";
/**
* `Snackbar` is a temporary notification component for brief messages, supporting theming, actions, and custom styles.
*
* @param {object} props - The properties to customize the `Snackbar` component.
* @param {boolean} props.open - Whether the snackbar is visible.
* @param {string} props.message - The message to display in the snackbar.
* @param {number} [props.duration=3000] - Duration in milliseconds before auto-close.
* @param {() => void} props.onClose - Function to call when closing the snackbar.
* @param {React.ReactNode} [props.action] - Optional action element (e.g., button) to display.
* @param {React.CSSProperties} [props.styles] - Custom styles for the snackbar container.
* @param {string} [props.className] - Additional className for the snackbar.
* @param {"top" | "bottom"} [props.position="bottom"] - Position of the snackbar on the screen.
* @param {number} [props.cornerRadius] - Border radius for the snackbar. Overrides theme.cornerRadius if provided.
* @param {string} [props.backgroundColor] - Snackbar background color. Overrides theme.backgroundColor if provided.
* @param {string} [props.borderColor] - Snackbar border color. Overrides theme.borderColor if provided.
* @param {string} [props.shadowColor] - Snackbar shadow color. Overrides theme.shadowColor if provided.
* @param {string} [props.boxShadow] - Snackbar box-shadow. Overrides theme values if provided.
* @param {string|number} [props.padding] - Snackbar padding. Overrides theme.padding if provided.
* @param {string|number} [props.margin] - Snackbar margin. Overrides theme.margin if provided.
* @param {string} [props.fontFamily] - Snackbar font family. Overrides theme.fontFamily if provided.
* @param {string} [props.textColor] - Snackbar text color. Overrides theme.textColor if provided.
* @param {string} [props.transitionDuration] - Snackbar transition duration. Overrides theme.transitionDuration if provided.
*
* @returns {JSX.Element | null} A styled snackbar notification, or null if not open.
*/
export interface SnackbarProps {
open: boolean;
message: string;
duration?: number;
onClose: () => void;
action?: React.ReactNode;
styles?: React.CSSProperties;
className?: string;
position?: "top" | "bottom";
cornerRadius?: number;
backgroundColor?: string;
borderColor?: string;
shadowColor?: string;
boxShadow?: string;
padding?: string | number;
margin?: string | number;
fontFamily?: string;
textColor?: string;
transitionDuration?: string;
}
declare const Snackbar: ({ open, message, duration, onClose, action, styles, className, position, cornerRadius, backgroundColor, borderColor, shadowColor, boxShadow, padding, margin, fontFamily, textColor, transitionDuration, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element | null;
export default Snackbar;