React-toasties NPM

React Toast Component

A customizable and easy-to-use toast component for React applications.

Installation

To install the package, use npm or yarn:

npm install react-toasties

yarn add react-toasties

Usage

Import the Toast component and use it in your React application:

import React from "react";
import Toast from "react-toasties";
import "react-toasties/dist/Toast.css"; // Make sure to import the CSS file

function App() {
  const handleClose = () => {
    // Handle toast close
  };

  return (
    <div className="app-container">
      {/* Your application content */}
      <Toast
        message="This is a toast message"
        duration={5000}
        onClose={handleClose}
        position="top-right"
        showCloseButton={true}
        customClassName="custom-toast"
        showProgress={true}
      />
    </div>
  );
}

export default App;

Props

Prop	Type	Default	Required	Description
`message`	React.ReactNode		Yes	The message to be displayed in the toast.
`duration`	number		Yes	Duration in milliseconds for how long the toast should remain visible.
`onClose`	() => void		Yes	Callback function when the toast is closed.
`position`	string	'top-right'	No	Position of the toast on the screen. Possible values: `top-left`, `top-right`, `bottom-left`, `bottom-right`, `top-center`, `bottom-center`.
`showCloseButton`	boolean	`true`	No	Determines whether the close button should be shown.
`customClassName`	string		No	Additional custom class name for custom styling.
`showProgress`	boolean	`false`	No	Determines whether the progress bar should be shown.

License

This project is licensed under the MIT License - see the LICENSE file for details.

react component typescript toast

@everything-registry/sub-chunk-2618

1.0.1

2 years ago

1.0.0

2 years ago