{"id":15180343,"url":"https://github.com/script47/bs5-utils","last_synced_at":"2025-10-26T19:30:27.892Z","repository":{"id":43864989,"uuid":"402543551","full_name":"Script47/bs5-utils","owner":"Script47","description":"A JavaScript utility package for Bootstrap 5 components.","archived":false,"fork":false,"pushed_at":"2024-06-05T21:17:17.000Z","size":114,"stargazers_count":39,"open_issues_count":6,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T22:25:27.957Z","etag":null,"topics":["bootstrap","bootstrap-5","bootstrap5","modal","modal-dialog","modal-dialogs","snack","snackbar","snackbar-notification-messages","snacks","toast","toast-message","toast-notifications"],"latest_commit_sha":null,"homepage":"https://jsfiddle.net/172ymoj6/","language":"JavaScript","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/Script47.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-02T19:45:19.000Z","updated_at":"2024-08-05T11:05:11.000Z","dependencies_parsed_at":"2022-09-17T14:30:52.537Z","dependency_job_id":null,"html_url":"https://github.com/Script47/bs5-utils","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Script47%2Fbs5-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Script47%2Fbs5-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Script47%2Fbs5-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Script47%2Fbs5-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Script47","download_url":"https://codeload.github.com/Script47/bs5-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238386192,"owners_count":19463315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","bootstrap-5","bootstrap5","modal","modal-dialog","modal-dialogs","snack","snackbar","snackbar-notification-messages","snacks","toast","toast-message","toast-notifications"],"created_at":"2024-09-27T16:03:50.321Z","updated_at":"2025-10-26T19:30:27.886Z","avatar_url":"https://github.com/Script47.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bs5Utils - A JavaScript utility package for Bootstrap 5 components\n\nA simple package to make the usage of various components within Bootstrap 5 easier to use.\n\nIf this package has helped you, and you're feeling particularly generous:\n- **ETH/MATIC:** 0x6515654c8e931052ab17a63311411D475D503e59\n- **ADA:** addr1qxaqvghsr8lu3wrmql4fcvg6txj5083s2a9rr5dmrrtjt0yn8t0x4yav3ma2flg3tzcu9767s7senydcumnf6c4krnnspn949q\n\n**Note:** The package is also available on npmjs: https://www.npmjs.com/package/bs5-utils\n\n---\n\nContents\n-\n\n- [Configuration](#configuration)\n- [Theming](#theming)\n- [API](#api)\n- [Support \u0026 Contribute](#support--contribute)\n\nConfiguration\n-\n\nThere are several defaults which you can customize:\n\n```javascript\nBs5Utils.defaults.toasts.position = 'top-right';\nBs5Utils.defaults.toasts.container = 'toast-container';\nBs5Utils.defaults.toasts.stacking = false;\n```\n\nAs `bs5Utils.Snack` is a subset of `bs5Utils.Toast`, the configuration for toasts will also apply to `bs5Utils.Sanck`.\n\nTheming\n-\n\nYou can register your own custom styles by passing classes to specific components by using the static\nmethod `Bs5Utils.registerStyle`. The components you can customise are:\n\n- `btnClose` - The dismiss button\n- `main` - The area of the toast, snack, or modal which will display the `type` color\n- `border` - The border of the component\n\nThese components have been clearly illustrated below. For the time being, the `border` style for `bs5Utils.Snack` cannot\nbe overridden.\n\n**Note:** All of these keys _must_ be passed in the `styles` parameter object.\n\n**Method Overview**\n\n```javascript\n/**\n * Register a style for the components\n * @param key - To reference your style\n * @param styles - The style object\n */\nBs5Utils.registerStyle(key, styles)\n```\n\n**Usage**\n\nYou first define your CSS classes:\n\n```css\n.bg-pink {\n    background-color: pink;\n}\n\n.text-purple {\n    color: purple;\n}\n\n.border-pink {\n    border-color: pink !important;\n}\n```\n\nThen you register the style:\n\n```javascript\nBs5Utils.registerStyle('pink', {\n    btnClose: ['btn-close-white'],\n    main: ['bg-pink', 'text-purple'],\n    border: ['border-pink']\n});\n```\n\nPass empty arrays if you wish to leave the default styles e.g.\n\n```javascript\nBs5Utils.registerStyle('pink', {\n    btnClose: [],\n    main: ['bg-pink', 'text-purple'],\n    border: ['border-pink']\n});\n```\n\nNow, `pink` can be used as a `type` when displaying snacks, toasts, or modals e.g.\n\n**Snack**\n\n![Theming Snack](example/img/theming-snack.png)\n\n**Toast**\n\n![Theming Snack](example/img/theming-toast.png)\n\n**Modal**\n\n![Theming Modal](example/img/theming-modal.png)\n\nAPI\n-\n\nThis package is based around the `Bs5Utils` class, so first things first, construct the object:\n\n```javascript\nconst bs5Utils = new Bs5Utils();\n```\n\nThereafter you'll be able to use the methods outlined below.\n\n### Snacks\n\n**Method Overview**\n\n```javascript\n/**\n * Display a lightweight toast for simple alerts\n * @param - type the theme of the snack\n * @param - title the title of the of the snack\n * @param - delay in ms, if specified the snack will autohide after the specified amount\n * @param - dismissible set whether the dismiss button should show\n */\nbs5Utils.Snack.show(\n    type,\n    title,\n    delay = 0,\n    dismissible = true\n);\n```\n\n**Usage**\n\n```javascript\nbs5Utils.Snack.show('secondary', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('light', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('white', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('dark', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('info', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('primary', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('success', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('warning', 'Hello World!', delay = 0, dismissible = true);\nbs5Utils.Snack.show('danger', 'Hello World!', delay = 0, dismissible = true);\n```\n\n**Example**\n\n![img.png](example/img/api-snacks.png)\n\n### Toasts\n\n**Method Overview**\n\n```javascript\n/**\n * Display a toast for alerts\n * @param type - the theme of the snack\n * @param icon - Set an icon in the top-left corner, you can pass HTML directly\n * @param title - the title of the of the toast\n * @param subtitle - the subtitle of the toast\n * @param content - the content of the toast\n * @param buttons - the action buttons of the toast\n * @param delay - in ms, if specified the snack will autohide after the specified amount\n * @param dismissible - set whether the dismiss button should show\n */\nbs5Utils.Toast.show({\n    type,\n    icon = '',\n    title,\n    subtitle = '',\n    content = '',\n    buttons = [],\n    delay = 0,\n    dismissible = true,\n});\n```\n\n**Usage**\n\n```javascript\nbs5Utils.Toast.show({\n    type: 'primary',\n    icon: `\u003ci class=\"far fa-check-circle fa-lg me-2\"\u003e\u003c/i\u003e`,\n    title: 'Notification!',\n    subtitle: '23 secs ago',\n    content: 'Hello World!',\n    buttons: [\n        {\n            text: 'Click Me!',\n            class: 'btn btn-sm btn-primary',\n            handler: () =\u003e {\n                alert(`Button #1 has been clicked!`);\n            }\n        },\n        {\n            text: 'Click Me Too!',\n            class: 'btn btn-sm btn-warning',\n            handler: () =\u003e {\n                alert(`You clicked me too!`);\n            }\n        },\n        {\n            type: 'dismiss',\n            text: 'Hide',\n            class: 'btn btn-sm btn-secondary'\n        }\n    ],\n    delay: 0,\n    dismissible: true\n});\n```\n\n**Example**\n\n![img.png](example/img/api-toasts.png)\n\n### Modals\n\n**Method Overview**\n\n```javascript\n/**\n * Display a modal\n * @param type - the theme of the snack\n * @param title - the title of the modal, if omitted, the modal-header element is removed\n * @param content - the content of the modal, if omitted, the modal-body element is removed\n * @param buttons - any action buttons, if omitted, the the modal-footer element  is removed\n * @param centered - set whether the modal is centered\n * @param dismissible - set whether the dismiss button should show\n * @param backdrop - set the type of backdrop: true, false, static\n * @param keyboard - set whether the escape key closes the modal\n * @param focus - set whether the modal is autofocussed when initialized\n * @param fullscreen - set whether the modal is fullscreen\n * @param modalSize - set the size of the modal: sm, lg, xl by default, it's an empty string\n */\nbs5Utils.Modal.show({\n    type,\n    title = '',\n    content = '',\n    buttons = [],\n    centered = false,\n    dismissible = true,\n    backdrop = dismissible ? true : 'static',\n    keyboard = dismissible,\n    focus = true,\n    fullscreen = false,\n    size = ''\n})\n```\n\n**Usage**\n\n```javascript\nbs5Utils.Modal.show({\n    type: 'primary',\n    title: `Hello World!`,\n    content: `\u003cp class=\"text-center fw-bold\"\u003eHello World!\u003c/p\u003e`,\n    buttons: [\n        {\n            text: 'Click Me!',\n            class: 'btn btn-sm btn-primary',\n            handler: () =\u003e {\n                alert(`Button #1 has been clicked!`);\n            }\n        },\n        {\n            text: 'Click Me Too!',\n            class: 'btn btn-sm btn-warning',\n            handler: () =\u003e {\n                alert(`You clicked me too!`);\n            }\n        },\n        {\n            type: 'dismiss',\n            text: 'Hide',\n            class: 'btn btn-sm btn-secondary'\n        }\n    ],\n    centered: true,\n    dismissible: true,\n    backdrop: 'static',\n    keyboard: false,\n    focus: false\n});\n```\n\n**Example**\n\n![img.png](example/img/api-modal-1.png)\n\n![img.png](example/img/api-modal-2.png)\n\n![img_1.png](example/img/api-modal-3.png)\n\n![img.png](example/img/api-modal-4.png)\n\nSupport \u0026 Contribute\n-\n\n- Use: [Babel Repl](https://babeljs.io/repl) and [JavaScript Minifier](https://javascript-minifier.com/) to build the\n  app to transpile and minify your changes\n- Submit issues and PRs\n- Let's know how you're using this package in your project\n- If this package has helped you, and you're feeling particularly generous:\n  - **ETH/MATIC:** 0x6515654c8e931052ab17a63311411D475D503e59\n  - **ADA:** addr1qxaqvghsr8lu3wrmql4fcvg6txj5083s2a9rr5dmrrtjt0yn8t0x4yav3ma2flg3tzcu9767s7senydcumnf6c4krnnspn949q\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscript47%2Fbs5-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscript47%2Fbs5-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscript47%2Fbs5-utils/lists"}