Nth Phonetic Mnemonic

    svelte-bootstrapjs-action

    2.0.4 • Public • Published

    svelte-bootstrapjs-action

    NPM version NPM downloads Svelte v3

    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, update, 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 bsItems = [];
    	let bsConfig = {type: Collapse, config: {toggle: false}, mount: (instance) => bsItems.push(instance), destroy: (instance) => bsItems.splice(bsItems.indexOf(instance), 1)};
    
    	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

    Name Type Description
    type N/A The Bootstrap 5 JavaScript class to use for creating the instance.
    config Object (Optional) The Bootstrap 5 configuration that is passed as a second parameter to constructor for all instances.
    mount Function (Optional) A callback with new bootstrap instance as an argument that is called on element creation.
    update Function (Optional) A callback with current bootstrap instance as an argument that is called on element update.
    destroy Function (Optional) A callback with old bootstrap instance as an argument that is called on element destruction.

    Install

    npm i svelte-bootstrapjs-action

    DownloadsWeekly Downloads

    29

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • dnr