Customization
Quick guide about how you can customize the library to reach the style you like/want for your project.
Toaster
Is the component that you will add to your page to render all the toast you want to render from anywhere in your project. You can add some customizations to it.
| Property | Description | Accepted Type |
|---|---|---|
| positionX? | Define the position in the axis X where the toasts will be rendered | left | center | right |
| positionY? | Define the position in the axis Y where the toasts will be rendered | up | middle | bottom |
toast
Is the toast itself, you can add some customizations to it to match your design/goal. We added some basic designs to most common situations you will need it to. This should be send in the object send in the function echo.notify() when you want to render a toast.
| Property | Description | Accepted Type |
|---|---|---|
| type? | Define the design you will see depending on the situation you want to render the toast. (default is blank) | loading | succesful | error | warning | info | blank |
| action? | Define that you can add a button to your toast so user can interact with it. | action?: { label: string, onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void, styling?: string } |
| label | Add the text you want to show on your toast | string |
| title? | Add a title to your toast it will add a better idea to the user what you are talking about | string |
| icon? | You can add the icon you want to show it on the toast. You will need to add an icon like a component or an icon imported from a library like React Icons/Lucide. | React.ElementType |
| closeButton? | Allow you to disable or show the close icon, by default is true | boolean |
| border? | Allow you to show or hide the border of the toast, by default is true. | boolean |
| swipe | Allow you to enable or disable the implementation to allow user close a toast swipping, by default is true | boolean |
| swipeDirection | Select the direction you want the users to swipe to close the toast, by default is right | left | right |
And thats it! Thats what you can edit or customize about the components of the library, if you have some ideas about what can be added that you think will be helpful for everyone, let us know!