Toast

A customizable toast component with variants that provides feedback.

Galaxy Toast

A default toast component that shows different props: success, failure and warning, by changing the color and text to suit your use case.

Preview

import React, { useState, useEffect } from "react";

const SuccessToast = ({ onClose }) => {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="fixed top-5 right-5 z-50 px-4 py-2 bg-green-500 rounded shadow-lg flex items-center justify-between text-white">
      <p className="text-sm">Operation successful!</p>
      <button onClick={onClose} className="ml-4 font-bold">
        ×
      </button>
    </div>
  );
};

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

  return (
    <div className="flex items-center justify-center">
      <button
        onClick={() => setShowToast(true)}
        className="px-4 py-2 bg-black text-white rounded"
      >
        Click me
      </button>
      {showToast && <SuccessToast onClose={() => setShowToast(false)} />}
    </div>
  );
};

export default Toast;

Usage Example

import React from "react";
import Toast from "./components/comp/Toast/GalaxyToast";

const App = () => {
  return (
    <div>
      <Toast />
    </div>
  );
};

export default App;

Earth Toast

A toast component that shows different props: success, failure and warning, by changing the color and text to suit your use case.

Preview

import React, { useState, useEffect } from "react";

const SuccessToast = ({ onClose }) => {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="fixed top-5 right-5 z-50 px-4 py-2 self-center flex justify-between items-center bg-green-50 border-b-4 border-green-500 shadow-lg">
      <div>
        <p className="text-sm mb-1">Operation successful!</p>
        <p className="text-sm">Moving to the next planet</p>
      </div>
      <button onClick={onClose} className="ml-4 font-bold">
        ×
      </button>
    </div>
  );
};

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

  return (
    <div className="flex items-center justify-center">
      <button
        onClick={() => setShowToast(true)}
        className="px-4 py-2 bg-black text-white rounded"
      >
        Click me
      </button>
      {showToast && <SuccessToast onClose={() => setShowToast(false)} />}
    </div>
  );
};

export default Toast;

Usage Example

import React from "react";
import Toast from "./components/comp/Toast/EarthToast";

const App = () => {
  return (
    <div>
      <Toast />
    </div>
  );
};

export default App;