kkduniya-react-flash-message

Flash messages are brief, one-time notifications that provide feedback to users about an action they've just taken. These messages typically appear at the top or bottom of the screen and disappear after a few seconds or when dismissed. They are often used to show:

Success messages (e.g., "Your form was submitted successfully!") Error messages (e.g., "Something went wrong. Please try again.") Informational messages (e.g., "New updates are available.") Warning messages (e.g., "You have unsaved changes.")

Key Characteristics: Short-lived: They usually disappear after a set time interval (e.g., 3-5 seconds). Non-intrusive: They don’t require user interaction and typically don’t block the workflow. Clear messaging: The content is concise, making it easy for users to quickly understand the information.

Use Cases: Form submissions: Displaying success or error messages after form submission. User actions: Notifying users of successful actions, such as saving a file or adding a product to a cart. System notifications: Alerting users of changes like low battery or system updates.

Example of a Flash Message: Success: "Profile updated successfully!" Error: "Unable to load data. Please try again."

In React, libraries like react-toastify or kkduniya-react-flash-message allow developers to quickly implement these flash messages with customizable styles, positions, and durations. They ensure that users stay informed about their actions without needing to reload or navigate away from the current screen.

Install

npm install --save kkduniya-react-flash-message@latest

Usage

// src/App.js
import React from 'react';
import { ToastContainer } from 'kkduniya-react-flash-message'; // Adjust the import path as necessary

function App() {
  const handleClick = () => {
    window.showToast('This is a success message!', 'warning', 'top-center', 2000, {
      success: '#4caf50',
      error: '#f44336',
      info: '#2196f3',
      warning: '#ff9800',
    });
  };

  return (
    <div className="App">
      <ToastContainer />
      <button onClick={handleClick}>Show Toast</button>
    </div>
  );
}

export default App;

License

MIT © kkduniya