svelte-bootstrapjs-action v2.2.2

svelte-bootstrapjs-action

A Svelte action plugin that enables Bootstrap JavaScript functionality on Bootstrap 5 elements.

Features

This is a Svelte action to manage Bootstrap JavaScript.

• Easy to use
• Handles creation/disposal of Bootstrap instances to avoid memory leaks
• Access to instances using callbacks for mount, destroy lifecycles.
• Reactivity

Installation

npm i svelte-bootstrapjs-action

Usage

Before anything else, please afford some time to read more about Bootstrap 5 JavaScript.
This will also help you understand which Bootstrap JS class and configuration to use depending on DOM element(s).

Here is an example using Bootstrap 5 Accordion.
You can also check a demo sample in Svelte REPL!

<script>
	import { Collapse } from "bootstrap";
	import bootstrapjs from "svelte-bootstrapjs-action";

	let bsConfig = {
    type: Collapse,
    config: {
      toggle: false
    },
    mount: (instance) => /** Do something when element is rendered **/,
    destroy: (instance) => /** Do something when element is destroyed **/
  };

	function toggleAccordionItems(event) {
		// Using constructor configuration schema
		bsConfig.config = {toggle: true};
		bsConfig = bsConfig;
	}
</script>
<div class="my-4">
	<button on:click={toggleAccordionItems}>
		Toggle Collapse State
	</button>
</div>
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div use:bootstrapjs={bsConfig} id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
      <div class="accordion-body">
        I'm the content.
      </div>
    </div>
  </div>
</div>

API

Parameters