http-status-toast
v1.5.1
Published
A simple toast notification according to your http req response!
Downloads
22
Maintainers
Readme
HTTP STATUS TOAST
Introducing a straightforward and practical library designed to assist developers in effectively notifying users about the status of their requests. 😁
✨ Release 🚀 Check on releases on source repository! ✨
Description
This library offers a simple, concise, and versatile solution, making it easier than ever for developers to communicate essential information to users. With its user-friendly approach, it simplifies the process of conveying the current state of requests, ensuring a seamless user experience. Whether you need to provide updates, alerts, or general notifications, this library has got you covered, enabling you to streamline your development process while delivering clear and informative messages to your users.
License
Suggestions and Issues
Suggestions are always welcome!
Please, if you have a suggestion or issue to do, create an issue at this repo. Follow this example:
[ToastHeader] Alignments with alignment error
And inside of it, your description of the suggestion/issue.
Thank you 🚀✨
Installation
Install http-status-toast
using npm
npm install http-status-toast
Demonstration
For use in the simplest way:
fetch(URL)
.then((response) => setData(response.data))
.catch((error) => httpStatusToast(response.status, 'en'))
Above we have a simple call of the lib function, that will call a notification with a simple message and a simple toast with its theme according to the status passed by params.
Default examples by status
Here we will have some examples of the simplest use of this function, passing just the status and the english lang to the function.
- When the status passed it fits successfull request:
- When the status passed it fits client error request:
- When the status passed it fits server error request:
- When the status passed it fits unknown type of request:
But if you want to customize more and more, we have some optionals uses for this function.
You can costume:
- Style by
customStyle
params, JSON format - Horizontal position by
position
params, passing "right" or "left" values - Language by
lang
params, for now we have just for portuguese ("pt"), spanish ("es") and english ("en") - Toast duration by
duration
params, passing milisseconds value - Custom message by
message
params, passing a string or a React Node - Custom header by
customHeader
params, passing a string or a React Node
Storybook controls visualization
Examples of uses:
- Style
fetch(URL)
.then((response) => httpStatusToast({
status: response.status,
lang: 'en',
customStyle: { "font-family": "Times new Roman", "color": "red" }
}))
.catch((error) => console.error(error))
- Position
fetch(URL)
.then((response) => httpStatusToast({
status: response.status,
lang: 'en',
position: "left"
}))
.catch((error) => console.error(error))
- Language
fetch(URL)
.then((response) => httpStatusToast({
status: response.status,
lang: 'pt'
}))
.catch((error) => console.error(error))
- Duration
fetch(URL)
.then((response) => httpStatusToast({
status: response.status,
lang: 'pt',
duration: 6000, // 6 seconds
}))
.catch((error) => console.error(error))
- Message
fetch(URL)
.then((response) => httpStatusToast({
status: response.status,
lang: 'en',
message: response.data.message || <div>Lorem ipsum <SomeIcon /></div>,
}))
.catch((error) => console.error(error))
- Custom header
fetch(URL)
.then((response) => httpStatusToast({
status: response.status,
lang: 'en',
customHeader: "Lorem ipsum" || <div>Lorem ipsum <SomeIcon /></div>,
}))
.catch((error) => console.error(error))
And that's it! ❤️