# Confirmly-Popup.js
A lightweight, customizable JavaScript confirmation popup library with TypeScript support. Built on top of Popper.js for perfect positioning and works seamlessly with Bootstrap, Tailwind CSS, or any custom styling.
A lightweight Javascript confirmation plugin 🚀 No Hassle!
## Live Demo
Check out the live demo to see Confirmly in action with various themes, placements, and customization options:
[**View Demo & Docs**](https://farisnceit.github.io/confirmly-js/)
## Features
- Perfect positioning with Popper.js
- Fully customizable template and styling
- Responsive and mobile-friendly
- TypeScript support
- Lightweight with minimal dependencies
- Easy to integrate with any framework
- ESM and UMD builds available
## Installation
### NPM
```bash
npm install confirmly-popup.js
```
### PNPM
```bash
pnpm add confirmly-popup.js
```
### CDN
Add the following script tags to your HTML file:
```html
```
## Basic Usage
### ES Modules
```javascript
import { ConfirmPopup } from 'confirmly-popup.js';
import 'confirmly-popup.js/styles.css';
// Create a new confirmation popup
const popup = new confirmly.ConfirmPopup({
targetElement: document.querySelector('#myButton'),
onConfirm: () => {
console.log('Confirmed!');
},
onCancel: () => {
console.log('Cancelled!');
},
});
```
### CommonJS
```javascript
const { ConfirmPopup } = require('confirmly-popup.js');
require('confirmly-popup.js/styles.css');
// Create a new confirmation popup
const popup = new confirmly.ConfirmPopup({
targetElement: document.querySelector('#myButton'),
onConfirm: () => {
console.log('Confirmed!');
},
onCancel: () => {
console.log('Cancelled!');
},
});
```
### Browser (UMD)
```html
```
new confirmly.ConfirmPopup
## Framework Integration
### Bootstrap
```javascript
const popup = new confirmly.ConfirmPopup({
targetElement: document.querySelector('#myButton'),
buttonClasses: {
confirm: 'btn btn-primary',
cancel: 'btn btn-secondary',
},
template: `