Snackbar

The RhSnackbar component can display success, warning, info and error messages. RhSnackbar component provides a powerful tool for displaying messages to the user clearly and concisely.

Usage

Once installed, you can import the RhSnackbar component into your React application:

import {RhSnackbar} from "@rhythm-ui/react"

Then, you can use the RhSnackbar component in your JSX code:

Success

The success message informs the user that an action has been completed successfully.

<RhButton
  onClick={() =>
    RhToast.success("Success", {
      position: "bottom-right",
    })
  }
  variant="primary"
>
  Success
</RhButton>

Failure

The failure messages inform the user that an error has occurred.

<RhButton
  onClick={() =>
    RhToast.error("Error", {
      position: "bottom-right",
    })
  }
  variant="primary"
>
  Error
</RhButton>

Warning

The warning message informs the user of a potential issue or problem that they should be aware of.

<RhButton
  onClick={() =>
    RhToast.warning("Warning", {
      position: "bottom-right",
    })
  }
  variant="primary"
>
  Warning
</RhButton>

Info

The info messages provide the user with additional information that may be useful or informative.

<RhButton
  onClick={() =>
    RhToast.info("Info", {
      position: "bottom-right",
    })
  }
  variant="primary"
>
  Info
</RhButton>

Custom

The custom component would provide an easy-to-use and flexible way to display notifications or alerts to users within a React application.

<RhButton
  onClick={() =>
    RhToast.info("Success", {
      closeButton: (
        <RhIcon icon="eva:close-square-outline" className="text-lg" />
      ),
      position: "bottom-right",
    })
  }
  variant="primary"
>
  Custom
</RhButton>

Position

The position props would provide an additional level of customization to the basic snack bar component, allowing developers to control where and how the snack bar is displayed on the screen.

<RhButton
  onClick={() =>
    RhToast.info("Info", {
      position: "top-right",
    })
  }
  variant="primary"
>
  Position
</RhButton>