react-toast-mela
v1.0.4
Published
Free React Toast Package to use in Any React Projects to Implement Beautiful Toasts.
Downloads
10
Maintainers
Readme
react-toast-mela
Free React Toast Package to use in Any React Projects to Implement Beautiful Toasts.
react-toast-mela
react-toast-mela
is a lightweight and customizable toast notification component for React applications. It provides a simple way to display brief messages to users.
Table of Contents
- Installation
- Usage
- Props
- Customization
- Example
- License
Installation
You can install react-toast-mela
using npm or yarn:
bash
npm install react-toast-mela
or
bash
yarn add react-toast-mela
Usage
To use react-toast-mela
, follow these steps:
Import the Toast component: jsx
import {Toast} from 'react-toast-mela';
Render the Toast component in your application: You need to manage the state of the toast message and its visibility. Here’s a simple example: jsx
import React, { useState } from 'react'; import {Toast} from 'react-toast-mela'; const App = () => { const [showToast, setShowToast] = useState(false); return ( <div> <button onClick={()=>setShowToast(true)}>Show Toast</button> {showToast && <Toast message="Toast Message!" duration={3000} onClose={()=>setShowToast(false)} />} </div> ); }; export default App;
Props
The Toast
component accepts the following props:
message
(string): The message to display in the toast. This is a required prop.duration
(number): The duration (in milliseconds) for which the toast will be visible. Default is3000
ms. This prop is Optional.onClose
(function): A callback function that is called when the toast is closed.
Example
jsx
<Toast
message="This is a custom toast message!"
duration={5000}
onClose={() => console.log('Toast closed')}
/>
Customization
You can customize the appearance of the toast by overriding the inline styles provided in the Toast
component. For example:
jsx
<Toast
message="Custom styled toast!"
style={{ backgroundColor: 'blue', color: 'yellow', padding: '15px' }}
/>
Example
Here’s a more detailed example showing different ways to use and customize the Toast
component:
jsx
`import React, { useState } from 'react';
import {Toast} from 'react-toast-mela';
const App = () => {
const [showToast, setShowToast] = useState(false);
return (
<div>
<button onClick={()=>setShowToast(true)}>Show Toast</button
{showToast &&
<Toast
message="This is a customizable toast message!"
duration={5000}
onClose={() => console.log('Toast closed')}
style={{ backgroundColor: 'blue', color: 'yellow', padding: '15px' }}
/>
}
</div>
);
};
export default App;`
License
This package is licensed under the MIT License.