theshtify
v1.0.3
Published
Thesharsol notifyer is a lightweight, vanilla JS toast notification library.
Downloads
31
Readme
Thesharsol notifyer is a lightweight, vanilla JS toast notification library.it is completely customisable, allowing you to adapt the graphics window perfectly to the design of your project
Installation
npm i theshtify
CDN
<script src="https://cdn.jsdelivr.net/npm/theshtify/lib/theshtifyCDN.js"> </script>
<link rel="styleSheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/theshtify.css"/>
ESModule
import { theshtify } from "theshtify/lib/theshtify";
import "theshtify/css/theshtify.css";
Features
- Easy use
- Multiple stacked notifications
- Customizable
- No blocking of execution thread
Customization options
- Notification Text
- Duration
- Background color
- Close icon display
- Display position
- font
- progress
- border radius
- borders
Presentation
The theshtify function takes as a parameter an object describing your notifications. the various options are available in the descriptions shown below.
Options
Basic example
theshtify({message: 'welcome to theshtify',type:'success'});
Configuration options
the configuration options allow you to fully adapt theshtify to the context of your application. the different options are described below
Example with type "custom"
Using the “custom” type you can (as described in the table above) describe custom colors for different parts of your notification.
theshtify(
{
message: 'welcome to theshtify',
type: 'custom',
config:{
colors: {
bg: '#0C7059',/** notification background */
color: '#E0BC29',/** text-color*/
border: {
type: 'solid',/** border-type support all css types */
color: 'gray'/**the border color */
},
progress: {
bg: '#E0BC29'/** the progress bar color */
}
}
}
}
);
If you use the “custom” type without describing the colors as in the example, or omit certain parameters, theshtify will use the default values configured for the type
Colors configuration example
By default theshtify provides 4 types of notifications success, infos, danger and warning with corresponding colors. it may be that in the context of your project you want to redefine these colors, to do this simply redefine the description of the type in the “customColors”.
theshtify(
{
message: 'welcome to theshtify',
type: 'success',
config: {
custom_colors: {
success: {
bg: '#0C7059',
color: '#E0BC29',
border: {
type: 'solid',
color: 'gray'
},
progress: {
bg: '#E0BC29'
}
},
},
}
}
)
In the previous example, theshtify will use the configurations you specified for the “success” type. naturally, the other types will use theshtify's default colors, since we only specified custom configurations for the “success” type.
Full example
let config = {
x_align: 'right',
y_align: 'top',
duration: 5000,
font: {
size: 15,
weight: 900,
family: 'arlon'
},
custom_colors: {
success: {
bg: '#0C7059',
color: '#E0BC29',
border: {
type: 'solid',
color: 'gray'
},
progress: {
bg: '#E0BC29'
}
},
/** you can also add other types configs */
},
radius: 20,
bordered: true,
border_width: 1,
closer: true,
progress: true,
progress_height: 2
}
theshtify({ message: 'welcome to theshtify', type: 'success', config: config });
if you're working with modules, you can define the configuration in a separate file and import it at runtime
Errors
in the event of an error, theshtify will generate an error visible in your browser's console