Welcome to "The Complete Guide to React Toastify: Everything You Need to Know." Are you still using basic alert messages or writing a lot of code for notifications? So, there's no need to worry now. Today, you'll learn how to use React Toastify to add amazing notifications to your React projects easily. This library comes with pre-built notifications and lets you customize them to fit your needs perfectly. React Toastify is the perfect tool for making your website's notifications look great with minimal effort.
In this article, we will cover everything from the basics to the advanced features of React Toastify. With the help of this, you can create amazing notifications. You’ll find all the information you need to master React Toastify.
So let's learn everything about React Toastify.
Table of Contents:
- What is React-Toastify?
- How to use React Toastify?
- Types of Toast Notification
- Styling a Custom Toast Message
- Customizing React-Toastify Styles
- Changing Your Toast Message’s Position
- Limiting the Number of Toasts Shown Per Time
- Using Transitions and Animation for Toasts
- Adding a Swipe or Drag Dismiss Feature
- Creating Promise-based Toasts
- Handling Auto Close
- Customizing Icons, Utilizing Built-in Icons, Incorporating Images, and Hiding Icons
- Updating a Toast When an Event Happens
- Advanced Configuration Options
- Handling Multiple Toasts
- Understanding the Popularity of React Toastify
- Ensure You Avoid This Common Mistake When Using the React-Toastify Library
- FAQs
What is React-Toastify?
React-Toastify is like a magic wand for React applications. Using this, we can create notifications in our React app. We can create these notifications in response to any action done by the user, such as whether a task was completed, interrupted, or if some processing is going on.
Just like how a toaster alerts you when your toast is ready, these notifications appear when you interact with the app.
Toastify React offers various notification types, such as success, error alerts, and warning notifications. You can personalize notifications by adding icons, titles, and messages that match the look and feel of your app.
How to use React Toastify?
To use React-Toastify, you first need to install the package and import the necessary components into your React application.
You can run this command in your terminal to install this package in your project.
// For npm
npm install react - toastify
// For yarn
yarn add react - toastify
Next, import the CSS file and the necessary components in your main application file (e.g., App.js).
React-Toastify has a special component called ToastContainer. This component is really important because it's in charge of showing all the toast notifications in your React app. So, if you want React-Toastify to work correctly, make sure you include the ToastContainer component in your app.
Like this:
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
const notify = () => {
toast.success("Wow so easy!", { position: "top-right", });
};
return (
<div>
<button onClick={notify}>Click Me!</button>
<ToastContainer />
</div>
);
}
export default App;
Okay, great! As we have learned to create a simple toast notification, let's take a look at its different types, advanced customization options, and exciting possibilities beyond the basics.
Types of Toast Notification
In React Toastify, you've got 6 ready-made types of toast notifications to choose from!
- Success: Celebrates when things go right.
- Error: Alerts about problems.
- Warning: Reminds about potential issues.
- Info: Share helpful updates.
- Default: All-purpose notifications.
- Custom: Personalized messages.
To use each type, simply call the toast function with the desired type. For example, if we want to show a success toast message, we need to write toast.success(). But for default and custom toast notifications, we just need to write toast() without specifying a type.
First, give the toast message a class name for a custom toast type. Then, add your styles for that class in your CSS file, and import the CSS file into your project.
Here are some code examples to show you what each of these 6 types looks like and how to use them in your code.
// App.js
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import "./App.css";
function App() {
const showSuccessToast = () => toast.success("Success Notification");
const showErrorToast = () => toast.error("Error Notification");
const showInfoToast = () => toast.info("Info Notification");
const showWarningToast = () => toast.warn("Warning Notification");
const showDefaultToast = () => toast("Default Notification");
const showCustomToast = () => toast("Custom Notification!", {
className: "custom-toast",
});
return (
<div>
<button onClick={showSuccessToast}>Show Success</button>
<button onClick={showErrorToast}>Show Error</button>
<button onClick={showInfoToast}>Show Info</button>
<button onClick={showWarningToast}>Show Warning</button>
<button onClick={showDefaultToast}>Show Default</button>
<button onClick={showCustomToast}>Show Custom</button>
<ToastContainer />
</div>
);
}
export default App;
Here's an example of CSS code for a custom toast type message:
/* App.css */
.custom-toast {
background-color: rgb(40, 40, 40);
color: white;
padding: 15px 20px;
font-family: cursive;
transition: all 0.3s ease;
}
.custom-toast:hover {
background-color: black;
box-shadow: 8px 8px 5px rgb(182, 182, 182);
}
.custom-toast svg {
fill: white;
}
In this way, you can change the style of any toast message by giving it a class name, whether it is toast.success, toast.info, or any other type.
You might wonder why we don't assign a type for custom and default notifications in React-Toastify. This is because they are not types in reality. A toast.success is a predefined method for common notifications. The generic toast() function lets you create custom notifications with flexibility. This design avoids strict type rules, making it simpler to create both default and custom notifications.
Styling a Custom Toast Message
To style toast messages, you have two options: 1. using inline styles, or 2. using class names for customization, as explained in the previous topic.
1. Using inline style:
You can use JSX to style a custom toast message:
toast(<div style={{ color: 'blue' }}>Custom styled toast with JSX</div>);
2. Using class names for customization
toast("Custom Notification!", { className: "custom-toast" });
Now, you can personalize your custom toast notification using the custom-toast class name. Just make sure to import the corresponding CSS file where you're defining the styles.
Customizing React-Toastify Styles
In React Toastify, there are lots of ready-made CSS options you can adjust to make toast notifications look how you want. Whether you're changing success messages, info messages, or any other type, you can do it by tweaking these settings.
Here's a list of all the pre-built variables you can customize:
/* Define colors for different themes */
:root {
--toastify-color-light: #fff; /* Light theme background color */
--toastify-color-dark: #121212; /* Dark theme background color */
--toastify-color-info: #3498db; /* Info toast color */
--toastify-color-success: #07bc0c; /* Success toast color */
--toastify-color-warning: #f1c40f; /* Warning toast color */
--toastify-color-error: #e74c3c; /* Error toast color */
--toastify-color-transparent: rgba(255, 255, 255, 0.7); /* Transparent background color */
/* Define icon colors for different toast types */
--toastify-icon-color-info: var(--toastify-color-info); /* Info icon color */
--toastify-icon-color-success: var(--toastify-color-success); /* Success icon color */
--toastify-icon-color-warning: var(--toastify-color-warning); /* Warning icon color */
--toastify-icon-color-error: var(--toastify-color-error); /* Error icon color */
/* Set dimensions for toast notifications */
--toastify-toast-width: 320px; /* Toast width */
--toastify-toast-background: #fff; /* Toast background color */
--toastify-toast-min-height: 64px; /* Minimum height for toasts */
--toastify-toast-max-height: 800px; /* Maximum height for toasts */
--toastify-font-family: sans-serif; /* Font family used in toasts */
--toastify-z-index: 9999; /* Stack order of toasts */
/* Set text colors for light and dark themes */
--toastify-text-color-light: #757575; /* Text color for light theme */
--toastify-text-color-dark: #fff; /* Text color for dark theme */
/* Set text colors for different toast types */
--toastify-text-color-info: #fff; /* Text color for info toasts */
--toastify-text-color-success: #fff; /* Text color for success toasts */
--toastify-text-color-warning: #fff; /* Text color for warning toasts */
--toastify-text-color-error: #fff; /* Text color for error toasts */
/* Define colors for the spinner used in loading toasts */
--toastify-spinner-color: #616161; /* Spinner color */
--toastify-spinner-color-empty-area: #e0e0e0; /* Color for empty spinner area */
/* Define colors for the progress bar in different toast types */
--toastify-color-progress-light: linear-gradient(to right,
#4cd964,
#5ac8fa,
#007aff,
#34aadc,
#5856d6,
#ff2d55); /* Progress bar gradient for light theme */
--toastify-color-progress-dark: #bb86fc; /* Progress bar color for dark theme */
--toastify-color-progress-info: var(--toastify-color-info); /* Progress bar color for info toasts */
--toastify-color-progress-success: var(--toastify-color-success); /* Progress bar color for success toasts */
--toastify-color-progress-warning: var(--toastify-color-warning); /* Progress bar color for warning toasts */
--toastify-color-progress-error: var(--toastify-color-error); /* Progress bar color for error toasts */
--toastify-color-progress-bgo: .2; /* Background opacity for progress bar */
}
If you find that changing the CSS variables isn't giving you enough control, you can also override the default CSS classes. Below is a list of the CSS classes used, excluding those used for animation and media queries.
/* Used to define container behavior: width, position: fixed etc... */
.Toastify__toast-container {}
/* Used to define the position of the ToastContainer */
.Toastify__toast-container--top-left {}
.Toastify__toast-container--top-center {}
.Toastify__toast-container--top-right {}
.Toastify__toast-container--bottom-left {}
.Toastify__toast-container--bottom-center {}
.Toastify__toast-container--bottom-right {}
/* Classes for the displayed toast */
.Toastify__toast {}
.Toastify__toast--rtl {}
.Toastify__toast-body {}
/* Used to position the icon */
.Toastify__toast-icon {}
/* Handle the notification color and the text color based on the theme */
.Toastify__toast-theme--dark {}
.Toastify__toast-theme--light {}
.Toastify__toast-theme--colored.Toastify__toast--default {}
.Toastify__toast-theme--colored.Toastify__toast--info {}
.Toastify__toast-theme--colored.Toastify__toast--success {}
.Toastify__toast-theme--colored.Toastify__toast--warning {}
.Toastify__toast-theme--colored.Toastify__toast--error {}
/* Progress bar classes */
.Toastify__progress-bar {}
.Toastify__progress-bar--rtl {}
.Toastify__progress-bar-theme--light {}
.Toastify__progress-bar-theme--dark {}
.Toastify__progress-bar--info {}
.Toastify__progress-bar--success {}
.Toastify__progress-bar--warning {}
.Toastify__progress-bar--error {}
/* Colored notifications share the same progress bar color */
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {}
/* Classes for the close button. Better use your own closeButton */
.Toastify__close-button {}
.Toastify__close-button--default {}
.Toastify__close-button>svg {}
.Toastify__close-button:hover,
.Toastify__close-button:focus {}
You have the option to develop your own unique style by utilizing the SCSS file.
To customize the styling, simply take the scss folder from the repository and create your own stylesheet. If you're mainly interested in adjusting colors, you'll find the relevant color definitions within the '_variables.scss' file.
Changing Your Toast Message’s Position
React-Toastify gives you six options for where notifications can appear. The default position is "top-right".
- top-left
- top-right
- top-center
- bottom-left
- bottom-right
- bottom-center
To set the position for your toast notifications, you just need to adjust the ToastContainer component. Simply add the 'position' property and specify the desired position.
Like this:
const toastify = () => toast.success("Success Notification!", {
position: "top-right"
});
This way, you can easily set the positions and display the notification according to your project.
toast.success("Success Notification!", { position: "top-right" });
toast.success("Success Notification!", { position: "top-left" });
toast.success("Success Notification!", { position: "top-center" });
toast.success("Success Notification!", { position: "bottom-right" });
toast.success("Success Notification!", { position: "bottom-left" });
toast.success("Success Notification!", { position: "bottom-center" });
Limiting the Number of Toasts Shown Per Time
You can control the number of toasts shown at once by using the limit prop in the ToastContainer component. Set the limit to specify how many notifications can appear simultaneously.
If a user exceeds this limit by clicking repeatedly, the notifications won't show beyond the set number. They'll reappear only after a notification is closed.
<ToastContainer limit={3} />
In this code example, we've set a limit of three times for the notification to appear. So, it won't show up more than three times.
Using Transitions and Animation for Toasts
React-Toastify provides 4 built-in transitions for animations: 1. Slide, 2. Zoom, 3. Flip, 4. Bounce. You can use these transitions by importing and applying them to your project.
import { Slide, Zoom, Flip, Bounce } from 'react-toastify';
<ToastContainer transition={Zoom} />
If you want to customize transitions for each toast message individually, you can specify them directly within the toast function rather than configure them within the ToastContainer component.
Like this:
const notifyZoom = () => toast.info("Toast notification !", {
transition: Zoom
});
Adding a Swipe or Drag Dismiss Feature
To add a swipe or drag dismiss feature in your toast notifications, you can make use of the draggable and draggablePercent properties.
draggable: This property controls whether users can dismiss the toast notification by dragging it. By default, it is set to true, allowing drag-to-dismiss. If you don't want this feature, you can set it to false.
draggablePercent: This property defines the percentage of the toast's width that needs to be dragged before it gets dismissed.
const App = () => {
const notify = () => {
toast('This is a draggable toast notification!', {
draggable: true, // Default value is true
draggablePercent: 60, // The toast needs to be dragged 60% of its width to be dismissed
});
};
return (
<div>
<button onClick={notify}>Show Draggable Toast</button>
<ToastContainer />
</div>
);
};
In the example above, the toast needs to be dragged 60% of its width to be dismissed. For instance, setting it to 100 would require the user to drag the toast completely out of view before it gets dismissed, while setting it to 10 would require only a small drag.
Creating Promise-based Toasts
Using React Toastify, you can create promise-based toasts to show notifications for processes that take some time, like fetching data or submitting a form. React Toastify makes this easy with its toast.promise method.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
const notifyPromise = () => {
const myPromise = fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((res) => res.json());
toast.promise(myPromise, {
pending: 'Fetching data...',
success: 'Data fetched successfully 👌',
error: 'Error fetching data 🤯'
});
};
return (
<div>
<button onClick={notifyPromise}>Fetch Data</button>
<ToastContainer />
</div>
);
};
export default App;
When you click the "Fetch Data" button, the notifyPromise function is triggered. This function fetches data from the URL. While the data is being fetched, a pending toast notification is shown. Once the fetch operation is completed, the success or error toast notification is displayed based on whether the fetch was successful.
Handling Auto Close
Handling auto close for toast notifications in React Toastify allows you to control how long the toast notification is displayed before it automatically closes.
You can set this property to a specific duration in milliseconds or false. For example, setting autoClose to 3000 will cause the toast to disappear after 3 seconds, while setting it to false will keep it on screen until the user manually closes it.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
const showAutoCloseNotification = () => {
toast('This is a notification that will auto close in 3 seconds', {
autoClose: 3000,
});
};
const showManualCloseNotification = () => {
toast('This is a notification that will not close; you need to close it manually', {
autoClose: false,
});
};
return (
<div>
<button onClick={showAutoCloseNotification}>Show Auto-Close Notification</button>
<button onClick={showManualCloseNotification}>Show Manual-Close Notification</button>
<ToastContainer />
</div>
);
};
export default App;
showAutoCloseNotification: This function displays a notification that automatically closes after 3 seconds.
showManualCloseNotification: This function displays a notification that remains on the screen until the user manually closes it.
Customizing Icons, Utilizing Built-in Icons, Incorporating Images, and Hiding Icons
Toast notifications come with ready-made icons like ✔️ for success, ❌ for error, ℹ️ for info, and ⚠️ for warning.
However, you can bring in your own icons using external libraries like Font Awesome, or you can also use emojis. You have the freedom to design your own custom icons. A fascinating aspect is that you can also use a function to include images.
You can remove the icon completely by setting the hideIcon property to true.
Here are examples of code for different types of icons: default ones, customized ones, icons from external libraries, emoji icons, hidden icons, and image icons.
import React from 'react';
import { toast, ToastContainer } from 'react-toastify';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons'; // Example icon from FontAwesome
import 'react-toastify/dist/ReactToastify.css';
// CustomIcon component for rendering custom icon
const CustomIcon = () => (
<div style={{ fontSize: '24px', marginRight: '8px' }}>
🚀
</div>
);
// Function to trigger toast notifications with pre-built icons
const notifyWithPreBuiltIcons = () => {
toast.success('Success notification');
toast.error('Error notification');
toast.info('Info notification');
toast.warn('Warning notification');
};
// Function to trigger toast notification with FontAwesome icon
const notifyWithExternalLibraryIcon = () => {
toast('Notification with FontAwesome icon', {
icon: <FontAwesomeIcon icon={faCoffee} />,
});
};
// Function to trigger toast notification with Emoji icon
const notifyWithEmojiIcon = () => {
toast('😊 Notification with Emoji icon');
};
// Function to trigger toast notification with custom icon
const notifyWithCustomIcon = () => {
toast.success('Custom icon notification', {
icon: <CustomIcon />,
});
};
// Function to trigger toast notification with image icon
const notifyWithImage = () => {
toast.success('Notification with Image', {
icon: () => (
<img src="https://firebasestorage.googleapis.com/v0/b/codemafias-new.appspot.com/o/images%2Fee9730ad-36c4-490e-afcf-7e56df7ab4c6?alt=media&token=378fda33-d0e5-4d3f-ad04-b52c5a65ce4c" alt="Custom" style={{ width: '24px', marginRight: '8px' }} />
),
});
};
// Function to trigger toast notification without icon
const notifyWithoutIcon = () => {
toast('Notification without icon', {
hideIcon: true,
});
};
const App= () => {
return (
<div>
<button onClick={notifyWithPreBuiltIcons}>Pre-built Icons</button>
<button onClick={notifyWithExternalLibraryIcon}>FontAwesome Icon</button>
<button onClick={notifyWithEmojiIcon}>Emoji Icon</button>
<button onClick={notifyWithCustomIcon}>Custom Icon</button>
<button onClick={notifyWithImage}>Image Icon</button>
<button onClick={notifyWithoutIcon}>No Icon</button>
<ToastContainer />
</div>
);
};
export default App;
Updating a Toast When an Event Happens
Sometimes, you may need to update a toast dynamically based on certain events or conditions. React-Toastify provides functionality to easily update the content, type, or appearance of a toast when such events occur.
Here are some things you can do when updating a toast:
1. Change the content/message of the toast.
2. Modify the type of toast (e.g., success, error, warning, info).
3. Implementing Transitions During Updates.
Let's see an example of how to update a toast when a button is clicked:
import React from 'react';
import { ToastContainer, toast, Zoom } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
// Function to update the toast
const updateToast = () => {
// Display an initial toast
const toastId = toast("Initial Message");
// After 2 seconds, update the toast
setTimeout(() => {
// Update the toast message, type and animation
toast.update(toastId, {
render: () => <div>New content</div>,
type: toast.TYPE.SUCCESS,
transition: Zoom
});
}, 2000);
};
return (
<div>
{/* Button to trigger the update */}
<button onClick={updateToast}>Update Toast</button>
{/* Toast container to display the toasts */}
<ToastContainer />
</div>
);
}
export default App;
Advanced Configuration Options
React-Toastify offers advanced configuration options. You can customize the delay, pause on hover, and more.
<ToastContainer
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick={true}
rtl={false}
pauseOnFocusLoss={true}
draggable={true}
theme="dark"
pauseOnHover={true}
delay={1000}
/>
- autoClose={5000}: The toast will automatically close after 5 seconds (default setting).
- hideProgressBar={false}: The progress bar indicating the time left will be visible (default setting).
- newestOnTop={false}: New toast notifications will appear at the bottom of the stack (default setting).
- closeOnClick={true}: The toast will close when clicked on the notification (default setting).
- rtl={false}: The toast notifications will be displayed in left-to-right mode (default setting).
- pauseOnFocusLoss={true}: The timer will pause if the window loses focus (default setting).
- draggable={true}: The toast can be dismissed by dragging (default setting).
- theme="dark": Applies the dark theme to the toast notifications.
- pauseOnHover={true}: The timer will pause when the user hovers over the toast (default setting).
- delay={1000}: The toast will wait for 1000 milliseconds before showing up (the default value is 0).
Handling Multiple Toasts
Handling multiple toasts involves managing each toast individually using unique IDs. Here's how you can do that:
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
const notifyMultiple = () => {
// Display first toast and store its ID
const toastId1 = toast("First toast");
// Display second toast and store its ID
const toastId2 = toast("Second toast");
// Dismiss the first toast after a delay
setTimeout(() => {
toast.dismiss(toastId1);
}, 3000);
};
return (
<div>
<button onClick={notifyMultiple}>Show Multiple Toasts</button>
<ToastContainer />
</div>
);
};
export default App;
In this code, the notifyMultiple function is triggered by clicking a button. It displays two toast notifications sequentially and stores their unique IDs (toastId1 and toastId2). After a delay of 1000 milliseconds, the first toast is dismissed using toast.dismiss(toastId1).
Understanding the Popularity of React Toastify
React-Toastify is popular because it's easy to use and highly customizable. Toast notifications are easily integrated with React, improving the user experience with minimal effort.
The image below shows that React-Toastify has been the most popular tool for adding notifications over the last two years.
Ensure You Avoid This Common Mistake When Using the React-Toastify Library
Include <ToastContainer />: Make sure to integrate <ToastContainer /> within your component hierarchy. This ensures that toast notifications have a designated space for display.
Verify CSS Classes: Review your custom CSS classes to ensure they are accurately applied to toast elements. Confirm that class names are correctly spelled and properly referenced within your application.
FAQs
We have compiled a list of questions and answers on React-Toastify for curious developers. Once you've read them all, you'll probably see that your questions have been answered well, so you won't have much left to wonder about.
1. What is React Toastify?
Ans: React Toastify is a React library. With the help of it, we can quickly add notifications to React applications and customize them as needed.
2. How do I install React Toastify?
Ans: You can install React Toastify using npm or yarn. Run npm install react-toastify or yarn add react-toastify.
3. How do I use React Toastify?
Ans: First, import and configure the ToastContainer in your main component. Then, use the toast function to display notifications.
4. Can I customize the appearance of Toast notifications?
Ans: Yes, you can customize the appearance using CSS or by overriding the default styles with CSS variables.
5. How do I display a Toast notification?
Ans: Use the toast function from React Toastify, e.g., toast('Your message here').
6. Can I use icons in Toast notifications?
Ans: Yes, React Toastify supports icons in notifications, and you can also customize them.
7. What is RTL on react Toastify?
Ans: RTL stands for "Right-to-Left" and it allows notifications to be displayed in right-to-left languages like Arabic.
8. How do I handle multiple Toast notifications?
Ans: You can handle multiple notifications by simply calling the toast function multiple times. You can also limit the number of toasts displayed using the limit prop in the ToastContainer.
9. Can I control the duration of a Toast notification?
Ans: Yes, you can control the duration using the autoClose property. For example, toast('Your message', { autoClose: 5000 }) will display the notification for 5 seconds.
10. Is React Toastify responsive?
Ans: Yes, React Toastify is responsive and works well on both desktop and mobile devices.
11. Can I dismiss a Toast notification manually?
Ans: Yes, you can dismiss a toast manually by using the toast.dismiss() function or by enabling a close button.
12. How do I style toast notifications?
Ans: You can style toast notifications by using CSS classes or inline styles, and by overriding CSS variables.
13. What are the React Toast options?
Ans: React Toastify lets you customize your notifications with options like position, autoClose, hideProgressBar, closeButton, pauseOnHover, draggable, transition, rtl, and more.
14. Can I use custom icons or images in Toast notifications?
Ans: Yes, you can use custom icons or images by passing them as components to the toast function.
Interesting: You can visit this site, it has all the features of React-Toastify. Just pick what you want, and it'll generate the code for you. You can even preview how the notifications will look on the site.
Conclusion
Finally, we've explored nearly everything about React Toastify. It makes website notifications look just as good as those in mobile apps, thanks to this amazing library. The best part is, that you can easily tweak the notifications to match your project's needs. Now it's time to practice and get comfortable with it. So what are you waiting for? Sharpen your skills and boost your website's performance!
If you have any questions about this article or related to web development, you can ask them in the question box provided below, and you will get answers as soon as possible.