https://github.com/farisnceit/confirmly-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.
https://github.com/farisnceit/confirmly-js
bootstrap bootstrap5 confirm confirmation confirmation-dialog element javascript javascript-library popper popperjs popup react rollup tailwindcss typescript
Last synced: 7 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/farisnceit/confirmly-js
- Owner: farisnceit
- License: mit
- Created: 2025-01-10T10:47:07.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-03-18T08:48:47.000Z (7 months ago)
- Last Synced: 2025-03-18T09:38:39.386Z (7 months ago)
- Topics: bootstrap, bootstrap5, confirm, confirmation, confirmation-dialog, element, javascript, javascript-library, popper, popperjs, popup, react, rollup, tailwindcss, typescript
- Language: SCSS
- Homepage: https://farisnceit.github.io/confirmly-js/
- Size: 371 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
Delete Item
const popup = new confirmly.ConfirmPopup({
targetElement: document.querySelector('#myButton'),
onConfirm: () => {
console.log('Confirmed!');
},
onCancel: () => {
console.log('Cancelled!');
},
});
```
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: `
Are you sure you want to proceed?
Cancel
Confirm
`,
});
```
### Tailwind CSS
```javascript
const popup = new confirmly.ConfirmPopup({
targetElement: document.querySelector('#myButton'),
buttonClasses: {
confirm: 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
cancel: 'px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300',
},
template: `
Are you sure you want to proceed?
Cancel
Confirm
`,
});
```
### Material Design
```javascript
const popup = new confirmly.ConfirmPopup({
targetElement: document.querySelector('#myButton'),
buttonClasses: {
confirm: 'mdc-button mdc-button--raised',
cancel: 'mdc-button',
},
template: `
Are you sure you want to proceed?
Cancel
Confirm
`,
});
```
## API Reference
### Options
| Option | Type | Default | Description |
| ------------------ | ----------- | -------------------------------------------------- | ------------------------------------------ |
| `targetElement` | HTMLElement | Required | The element that triggers the popup |
| `template` | string | Default template | Custom HTML template for the popup |
| `buttonClasses` | object | `{ confirm: 'confirm-btn', cancel: 'cancel-btn' }` | CSS classes for buttons |
| `buttonContents` | object | `{ confirm: 'Yes', cancel: 'No' }` | Button text content |
| `defaultPlacement` | string | 'top' | Popup placement (top, bottom, left, right) |
| `showError` | boolean | true | Show console errors |
| `onConfirm` | function | undefined | Callback for confirm action |
| `onCancel` | function | undefined | Callback for cancel action |
### Methods
- `attach(element, onConfirm, onCancel)`: Attach the popup to a new element
- `destroy()`: Clean up and remove the popup
## Styling
The popup comes with minimal default styling. You can easily customize it using CSS:
```css
.confirmly-wrapper {
/* Your styles */
}
.confirmly-popup {
background: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 1rem;
}
.confirmly-arrow {
/* Arrow styles */
}
```
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## License
MIT License - see LICENSE file for details