utils-deva

Instant Classes & Functions to use

Vanilla JavaScript classes on your finger-tips. so you can focus on your project.
Relaxx! I got you!

Request a Feature

About The Project

last update : Oct 09, 2023 Evening

• Fixed CDN links : now usable
• Added new class and functionsfunction px() : now usable

Every website need some common elements to be implemented for a consistent UI/UX. Here are some simple UI components and funtionalities just a function call away. These all classes & functions are a solution to the problems that I faced while developing various websites, I bundled them together here.

Use these functionalities because:

• Your time should be focused on creating something amazing. A project that solves a problem and helps others
• You shouldn't be writing the same code over and over again.
• You should implement DRY principles to the rest of your life :smile:

Built With

   

Installation

• Include the main.js file in your project and create a new instance of a class.

<script src="path/to/main.js"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/gh/devashishp1999/utils-deva@main/main.min.js"></script>

<script>
  const toast = new Toast();

  toast.show(); // Show default toast
</script>

Or install with NPM:

npm i utils-deva

Or include one of the following CDN link in your project.

https://devashishp1999.github.io/utils-deva/main.min.js

or

https://cdn.jsdelivr.net/gh/devashishp1999/utils-deva@main/main.min.js

List of Classes :

👇

• new Toast()
• new SwipeCarousal()

• Toast

The Toast class provides a simple and flexible way to create and manage toast notifications in your web application. It allows you to easily customize the look, position and behavior of the toasts, and provides methods for showing, hiding and removing toasts.

Showing a Toast

To show a toast, call the show() method on the Toast instance and pass in an options object.

toast.show({
  text: "Hello World",
  position: "top",
  duration: 3,
  styles: {
    backgroundColor: "red",
    color: "white",
    fontSize: "20px",
  },
  animations: {
    slideIn: "1s",
  },
  fonts: {
    fontFamily: "Arial",
  },
});

Removing a Toast

To remove a specific toast, call the remove() method on the Toast instance and pass in the toast element as an argument.

toast.remove(toastElement);

Removing All Toasts

To remove all toasts, call the removeAll() method on the Toast instance.

toast.removeAll();

Configuration

The options object passed to the show() method can include the following properties:

• text (string): The text to display in the toast (default: "Toast text").
• position (string): The position of the toast. Available options are "top", "bottom", "center", "left" and "right" (default: "bottom").
• duration (number): The duration in seconds for which the toast should be displayed (default: 3).
• onClose (function): A callback function that is invoked when the toast is closed (default: null).
• styles (object): An object containing custom CSS styles to be applied to the toast (default: {}).
• animations (object): An object containing custom CSS animations to be applied to the toast (default: {}).
• fonts (object): An object containing custom fonts to be applied to the toast (default: {}).

Example

const toast = new Toast();
toast.show({
  text: "Hello World",
  position: "top",
  duration: 2.5,
  styles: {
    backgroundColor: "red",
    color: "white",
    fontSize: "20px",
  },
  animations: {
    slideIn: "1s",
  },
  fonts: {
    fontFamily: "Arial",
  },
});

This will create a new toast with the text "Hello World" and position it on the top of the screen and it will be removed after 3000ms. Also the toast will slide in from 1s with custom background color, color and font size and font family.

Browser Support

This library uses querySelector and appendChild which are supported by all modern browsers.

• SwipeCarousal

• px()

• $()

Docs are not updated :
Contact [e-mail]

License

This library is released under the MIT license

Hope this library will be helpful for you.