BellJs, the sound of a good notifications.

BellJs is a lightweight, modern, customizable alert library built in vanilla JavaScript making it agnostic. This guide will help you get started with it in an easy way. Check out the full api for all the information..

Quick Start

Using the npm package

To use BellJs in your web project you just need to run the following command inside your project.

# npm
npm i bell-alert

# pnpm
pnpm add bell-alert

Using the official cdn

You can also use a jsDelivr cdn or unpkg to import the library, as follows.

• jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bell-alert/dist/bell.css">
<script src="https://cdn.jsdelivr.net/npm/bell-alert/dist/bell.js"></script>

• unpkg:

<link rel="stylesheet" href="https://www.unpkg.com/bell-alert/dist/bell.css">
<script src="https://www.unpkg.com/bell-alert/dist/bell.js"></script>

These are the development versions so they are not minified, if you want to use a minified version put the .min before the file extension.

Importing the library

Depending on whether you used the npm package or the esm version you can use the BellJs modules:

import Bell from "bell-alert"
import "bell-alert/dist/bell.min.css" // If you are using a bundler like vite, webpack or other.

This will import the library into your project, so you can start using it.

Creating and using an alert.

With the library already imported you can easily create and use alerts. You just need to create an instance of Bell and pass it the parameters.

const bell = new Bell(...params)

BellJs Accepts two required parameters and one optional one, the first is an object with the title (it's the title) and the description (it's the description), the second is a string with the alert type and finally an object with different parameters, you can see them all in the full api.

const bell = new Bell({
title: "New alert",
description: "BellJs is amazing and light"
},"info")

Once the instance is created, all that's left is to display the alert. You can do this using the launch method of the same instance.

bell.launch()

Experiment with BellJs

Remember that BellJs is made to be customized to the maximum, due to its intuitive API it is very easy to configure it in different ways.

• Types: Learn the different types of alerts in "Alert Types".
• Themes: Use and create any theme you can imagine in "Custom and Community Themes".
• Configuration: Change bell parameters and create something new, all following the "Change everything" guide.

Follow the documentation to learn more about this beautiful alert library adaptable to your current design.