react-toasty-library
v1.0.4
Published
React notification made easy
Downloads
2
Maintainers
Readme
React-Toasty-library
Now integrating notifications into your project will be the easiest task. Also, you don't need to write big code to use the library!
Installation
$ npm i react-toasty-library
Note: Follow the instructions below to view the start page.
$ git clone https://github.com/KoVaL0/toasty-library.git
$ cd toasty-library
$ npm i
$ npm run build
$ cd example
$ npm i
$ npm run start
Main functionality:
- Show notifications.
- Ability to set the position of the notification.
- Ability to set the type of notification (notification of success, error, alert, etc.).
- Ability to set the duration of the notification.
- Ability to set the description of the notification.
- Ability to set notification indents.
- Ability to change the color of the notification type.
- Ability to change animation of appearance.
- Show up to 3 notifications at the same time.
Usage example:
import React from 'react';
import { ToastContainer, toast } from 'toasty-library';
import react-toasty-library/dist/index.css';
function App(){
const notify = () => toast("Wow so easy!");
return (
<div>
<button onClick={notify}>Notify!</button>
<ToastContainer />
</div>
);
}
Possible parameter passing:
toast.success('This contains the content of the notification!', {
position: "topRight",
color: "#000000",
timeShow: "1500",
animation: "wave",
});
Possible types of notifications:
toast.error('Toasty Error!');
toast.success('Toasty Success!');
toast.warning('Toasty Warning!');
toast.info('Toasty Info!');
You can change the indentation styles as follows (SCSS):
This requires you to override the style classes in your root style file
$indents: 3em;
#toastContainer-bottomRight {
bottom: $indents;
right: $indents;
}
#toastContainer-bottomLeft {
bottom: $indents;
left: $indents;
}
#toastContainer-topRight {
top: $indents;
right: $indents;
}
#toastContainer-topLeft {
top: $indents;
left: $indents;
}
Note: When using CSS: bottom:
3em
;