{"id":26470642,"url":"https://github.com/farisnceit/confirmly-js","last_synced_at":"2026-02-17T13:01:54.708Z","repository":{"id":271876368,"uuid":"914806286","full_name":"farisnceit/confirmly-js","owner":"farisnceit","description":"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.","archived":false,"fork":false,"pushed_at":"2025-03-24T09:50:47.000Z","size":1147,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T13:36:45.291Z","etag":null,"topics":["bootstrap","bootstrap5","confirm","confirmation","confirmation-dialog","element","javascript","javascript-library","popper","popperjs","popup","react","rollup","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://farisnceit.github.io/confirmly-js/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/farisnceit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-10T10:47:07.000Z","updated_at":"2025-03-28T10:37:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"50530bb0-e86d-4d74-96fd-5bfd7ab81d25","html_url":"https://github.com/farisnceit/confirmly-js","commit_stats":null,"previous_names":["farisnceit/confirmly-js","fariz-plugins/confirmly-js"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/farisnceit/confirmly-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Fconfirmly-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Fconfirmly-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Fconfirmly-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Fconfirmly-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farisnceit","download_url":"https://codeload.github.com/farisnceit/confirmly-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farisnceit%2Fconfirmly-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29545295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T13:00:00.370Z","status":"ssl_error","status_checked_at":"2026-02-17T12:57:14.072Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap5","confirm","confirmation","confirmation-dialog","element","javascript","javascript-library","popper","popperjs","popup","react","rollup","tailwindcss","typescript"],"created_at":"2025-03-19T19:22:49.648Z","updated_at":"2026-02-17T13:01:54.679Z","avatar_url":"https://github.com/farisnceit.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Confirmly-Popup.js\n\nA 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.\n\n\u003cspan style=\"color: white; background-color: oklch(0.546 0.245 262.881); padding:4px 16px; font-size:18px; border-radius:12px\"\u003eA lightweight Javascript confirmation plugin 🚀 No Hassle!\u003c/span\u003e\n\n![GitHub Release](https://img.shields.io/github/v/release/farisnceit/confirmly-js)\n![NPM Version](https://img.shields.io/npm/v/confirmly-popup.js)\n![](https://img.shields.io/github/issues/farisnceit/confirmly-js)\n![NPM License](https://img.shields.io/npm/l/confirmly-popup.js)\n\n## Live Demo\n\nCheck out the live demo to see Confirmly in action with various themes, placements, and customization options:\n\n[**View Demo \u0026 Docs**](https://farisnceit.github.io/confirmly-js/)\n\n## Features\n\n- Perfect positioning with Popper.js\n- Fully customizable template and styling\n- Responsive and mobile-friendly\n- TypeScript support\n- Lightweight with minimal dependencies\n- Easy to integrate with any framework\n- ESM and UMD builds available\n\n## Installation\n\n### NPM\n\n```bash\nnpm install confirmly-popup.js\n```\n\n### PNPM\n\n```bash\npnpm add confirmly-popup.js\n```\n\n### CDN\n\nAdd the following script tags to your HTML file:\n\n```html\n\u003c!-- Development version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/confirmly-popup.js@latest/dist/confirmly-popup.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Production version (minified) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/confirmly-popup.js@latest/dist/confirmly-popup.umd.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- CSS file (required) --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/confirmly-popup.js@latest/styles/confirmly-popup.css\"\n/\u003e\n```\n\n## Basic Usage\n\n### ES Modules\n\n```javascript\nimport { ConfirmPopup } from 'confirmly-popup.js';\nimport 'confirmly-popup.js/styles.css';\n\n// Create a new confirmation popup\nconst popup = new confirmly.ConfirmPopup({\n  targetElement: document.querySelector('#myButton'),\n  onConfirm: () =\u003e {\n    console.log('Confirmed!');\n  },\n  onCancel: () =\u003e {\n    console.log('Cancelled!');\n  },\n});\n```\n\n### CommonJS\n\n```javascript\nconst { ConfirmPopup } = require('confirmly-popup.js');\nrequire('confirmly-popup.js/styles.css');\n\n// Create a new confirmation popup\nconst popup = new confirmly.ConfirmPopup({\n  targetElement: document.querySelector('#myButton'),\n  onConfirm: () =\u003e {\n    console.log('Confirmed!');\n  },\n  onCancel: () =\u003e {\n    console.log('Cancelled!');\n  },\n});\n```\n\n### Browser (UMD)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/confirmly-popup.js@latest/styles/confirmly-popup.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cbutton id=\"myButton\"\u003eDelete Item\u003c/button\u003e\n\n  \u003cscript src=\"https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=https://cdn.jsdelivr.net/npm/confirmly-popup.js@latest/dist/confirmly-popup.umd.min.js\"\u003e\u003c/script\u003e\n\n  \u003cscript\u003e\n    const popup = new confirmly.ConfirmPopup({\n      targetElement: document.querySelector('#myButton'),\n      onConfirm: () =\u003e {\n        console.log('Confirmed!');\n      },\n      onCancel: () =\u003e {\n        console.log('Cancelled!');\n      },\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nnew confirmly.ConfirmPopup\n\n## Framework Integration\n\n### Bootstrap\n\n```javascript\nconst popup = new confirmly.ConfirmPopup({\n  targetElement: document.querySelector('#myButton'),\n  buttonClasses: {\n    confirm: 'btn btn-primary',\n    cancel: 'btn btn-secondary',\n  },\n  template: `\n    \u003cdiv class=\"card shadow-sm\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n        \u003cp class=\"mb-3\"\u003eAre you sure you want to proceed?\u003c/p\u003e\n        \u003cdiv class=\"d-flex justify-content-end gap-2\"\u003e\n          \u003cbutton data-button=\"cancel\"\u003eCancel\u003c/button\u003e\n          \u003cbutton data-button=\"confirm\"\u003eConfirm\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv data-popper-arrow\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  `,\n});\n```\n\n### Tailwind CSS\n\n```javascript\nconst popup = new confirmly.ConfirmPopup({\n  targetElement: document.querySelector('#myButton'),\n  buttonClasses: {\n    confirm: 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',\n    cancel: 'px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300',\n  },\n  template: `\n    \u003cdiv class=\"bg-white rounded-lg shadow-lg p-4 max-w-sm\"\u003e\n      \u003cp class=\"text-gray-700 mb-4\"\u003eAre you sure you want to proceed?\u003c/p\u003e\n      \u003cdiv class=\"flex justify-end space-x-2\"\u003e\n        \u003cbutton data-button=\"cancel\"\u003eCancel\u003c/button\u003e\n        \u003cbutton data-button=\"confirm\"\u003eConfirm\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv data-popper-arrow\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  `,\n});\n```\n\n### Material Design\n\n```javascript\nconst popup = new confirmly.ConfirmPopup({\n  targetElement: document.querySelector('#myButton'),\n  buttonClasses: {\n    confirm: 'mdc-button mdc-button--raised',\n    cancel: 'mdc-button',\n  },\n  template: `\n    \u003cdiv class=\"mdc-card\"\u003e\n      \u003cdiv class=\"mdc-card__content p-4\"\u003e\n        \u003cp class=\"mdc-typography--body1\"\u003eAre you sure you want to proceed?\u003c/p\u003e\n        \u003cdiv class=\"mdc-card__actions\"\u003e\n          \u003cbutton data-button=\"cancel\"\u003eCancel\u003c/button\u003e\n          \u003cbutton data-button=\"confirm\"\u003eConfirm\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv data-popper-arrow\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  `,\n});\n```\n\n## API Reference\n\n### Options\n\n| Option             | Type        | Default                                            | Description                                |\n| ------------------ | ----------- | -------------------------------------------------- | ------------------------------------------ |\n| `targetElement`    | HTMLElement | Required                                           | The element that triggers the popup        |\n| `template`         | string      | Default template                                   | Custom HTML template for the popup         |\n| `buttonClasses`    | object      | `{ confirm: 'confirm-btn', cancel: 'cancel-btn' }` | CSS classes for buttons                    |\n| `buttonContents`   | object      | `{ confirm: 'Yes', cancel: 'No' }`                 | Button text content                        |\n| `defaultPlacement` | string      | 'top'                                              | Popup placement (top, bottom, left, right) |\n| `showError`        | boolean     | true                                               | Show console errors                        |\n| `onConfirm`        | function    | undefined                                          | Callback for confirm action                |\n| `onCancel`         | function    | undefined                                          | Callback for cancel action                 |\n\n### Methods\n\n- `attach(element, onConfirm, onCancel)`: Attach the popup to a new element\n- `destroy()`: Clean up and remove the popup\n\n## Styling\n\nThe popup comes with minimal default styling. You can easily customize it using CSS:\n\n```css\n.confirmly-wrapper {\n  /* Your styles */\n}\n\n.confirmly-popup {\n  background: white;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  padding: 1rem;\n}\n\n.confirmly-arrow {\n  /* Arrow styles */\n}\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## License\n\nMIT License - see LICENSE file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarisnceit%2Fconfirmly-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarisnceit%2Fconfirmly-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarisnceit%2Fconfirmly-js/lists"}