Rock Toast

Rock Toast is a customizable and lightweight React notification component for displaying toast messages. With built-in animation support and flexible styling, it's perfect for adding elegant notifications to your application.

Features

• 🔥 Customizable animations for toast appearance and dismissal.
• 🎨 Dynamic color support using a pre-defined colorMap or custom values.
• 📐 Flexible positioning for toast notifications (e.g., top-right, bottom-left).
• ⏲️ Adjustable duration for notification visibility.
• 🛠️ Easy-to-use props for seamless integration.

Installation

To install the rocktoast library, run the following command:

npm install rocktoast

because this library require a sass, please install sass by run following command

npm install sass

Usage

1 . Importing the Rock Toast Component First, import the Rock Toast component from the rocktoast library:

import { RockToast } from "rocktoast";

2 . Basic Example

import React, { useState } from "react";
import RockToast from "rock-toast";

const App = () => {
  const [showToast, setShowToast] = useState(false);

  return (
    <div>
      <button onClick={() => setShowToast(true)}>Show Toast</button>
      {showToast && (
        <RockToast
          message="This is a toast notification!"
          duration={3000}
          onClose={() => setShowToast(false)}
          position="top-right"
          color="blue"
        />
      )}
    </div>
  );
};

export default App;

Props

| Prop Name | Type | Description | Default | | ---------- | -------- | --------------------------------------------------------------------------------- | --------- | | message | string | The message text displayed in the toast. | required | | duration | number | Duration (in milliseconds) the toast will be visible. | 3000 | | onClose | func | Callback function triggered when the toast is closed. | required | | position | string | Position of the toast (top-right, top-left, bottom-right, bottom-left). | top-right | | color | string | Color of the toast notification. Can be a valid CSS color or a key from colorMap. | #4a2fdf |

Color Lists

The color prop supports predefined named colors from the colorMap or any valid CSS color value. Below are the available color options in the colorMap:

| Color Name | RGB Code | | ---------- | ------------------ | | blue | rgb(0, 0, 255) | | red | rgb(255, 0, 0) | | green | rgb(0, 255, 0) | | yellow | rgb(255, 255, 0) | | orange | rgb(255, 165, 0) | | purple | rgb(128, 0, 128) | | pink | rgb(255, 192, 203) | | brown | rgb(165, 42, 42) | | grey | rgb(128, 128, 128) | | black | rgb(0, 0, 0) | | white | rgb(255, 255, 255) | | cyan | rgb(0, 255, 255) | | magenta | rgb(255, 0, 255) | | lime | rgb(0, 255, 0) | | maroon | rgb(128, 0, 0) | | navy | rgb(0, 0, 128) | | olive | rgb(128, 128, 0) | | teal | rgb(0, 128, 128) | | coral | rgb(255, 127, 80) | | salmon | rgb(250, 128, 114) | | khaki | rgb(240, 230, 140) | | gold | rgb(184, 134, 11) | | silver | rgb(192, 192, 192) | | crimson | rgb(220, 20, 60) | | indigo | rgb(75, 0, 130) | | violet | rgb(238, 130, 238) | | plum | rgb(221, 160, 221) | | beige | rgb(245, 245, 220) | | lavender | rgb(230, 230, 250) | | mint | rgb(189, 252, 201) |

SCSS animation

The component includes the following built-in animations for toast transitions:

• Slide In from Right: slideInRight
• Slide Out to Right: slideOutRight
• Slide In from Left: slideInLeft
• Slide Out to Left: slideOutLeft

Credits

Developed with ❤️ by Ahmad Faisal.