Toast

Import

import { Toast } from "react-sheikah-ui";

Usage

Similar to Button, the RoundedButton component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing other operation.

Usually used in an action with lesser effect than Button component.

Includes a hover and focus effect similar to the game UI.

import { RoundedButton, Toast } from "react-sheikah-ui";

const [showToast, toggleToast] = useState(false);
const [toastType, setType] = useState("default");

function handleClose() {
  toggleToast(false);
}

<RoundedButton
  text="Toggle Toast"
  onClick={() => toggleToast(!showToast)}
/>
<Toast
  type={toastType}
  text={"Raw Chicken Drumstick"}
  visible={showToast}
  imageSrc={"/image.jpg"}
  visibleDuration={3000}
  onClose={handleClose}
  imageAlt={"Drumstick"}
/>

Available Props

text

The text displayed within the Toast component

visible

A boolean to define whether the Toast is displayed or not

visibleDuration

Optional Defines the time duration in miliseconds the Toast is visible before calling the function defined in onClose props. Defaults to 3000.

onClose

A function that will be triggered after the duration defined in the visibleDuration has passed. Used by parent component to hide the toast by changing the value passed in the visible props.

type

Optional The type of the Toast. Values available are default, success, warn, and error. If left empty, will be using default.

imageSrc

Optional Source of the image to be displayed in the Toast.

imageAlt

Optional The alt of the image that is displayed in the Toast. Used together with imageSrc.