UnpopularToast Component Documentation

The UnpopularToast component is a versatile and customizable notification system for React. Explore the various options available to tailor your toasts to fit your application“s design and functionality needs.

Basic Usage

To use the UnpopularToast component, import it and include it in your component. Below is a simple usage example:

import UnpopularToast from 'unpopular-js';
// Usage in your component
<UnpopularToast
  message="This is a basic toast notification!"
  type="info"
  duration={5000}
  onClose={() => console.log('Toast closed')}
/>

Customization Options

Customize the UnpopularToast component with the following props:

message: The text message to display in the toast.
type: The type of toast. Options are “success“, “error“, and “info“. Default is “info“.
duration: Duration (in milliseconds) before the toast auto-hides. Default is 5000ms.
onClose: Callback function triggered when the toast is closed.
backgroundColor: Background color of the toast. Can be any valid CSS color value.
textColor: Text color of the toast. Can be any valid CSS color value.
icon: Icon to display inside the toast. Can be a React element.
position: Position of the toast on the screen. Options are “top-left“, “top-right“, “bottom-left“, and “bottom-right“. Default is “top-right“.
animation: Animation effect for the toast. Options are “fade“ and “slide“. Default is “fade“.

Example Usages

Success Toast

Error Toast

Info Toast

Advanced Customization

For more complex scenarios, you can further customize the UnpopularToast component to fit your design preferences and application needs. Combine it with state management and other UI components to create dynamic notifications.

Conclusion

The UnpopularToast component provides a versatile and stylish solution for displaying notifications. Utilize its customization options to enhance user experience with elegant and functional toast messages in your React applications.