Skip to content

How to use

Jump to bottom Edit New page
thednp edited this page Dec 28, 2022 · 57 revisions

Before you go

Highly recommended read, the TL;DR of this library is actually cool. This library doesn't require any major third party library like Popper.js, but a small set of CSS style rules.

Run the tests suite (new)

  • Download the package from Github;
  • unpack/unzip and open the folder with your editor;
  • open your terminal and navigate to the root of the unpacked folder;
  • run npm install or npm update, takes a few minutes to download the Electron browser;
  • run npm run cypress to open the Cypress console OR npm run test to run the tests in headless mode.

Load from CDN

To load the library from CDN, drop one of these lines below before your ending <head> or </body> tag.

jsdelivr repository

Bootstrap 5

<script src="https://cdn.jsdelivr.net/npm/@thednp/bootstrap.native@latest/dist/bootstrap-native.js"></script>

Working locally

If you have to host the library in your project folders, download the package at Github, unpack it, copy the minified/un-minified file from dist/ folder into your application's assets folder, then simply drop this line (according to your application assets folders) before your ending </body> tag. You can also link the library in the <head>, check this out.

<script src="../assets/js/bootstrap-native.js"></script>

The /src folder contains the ES6+ JavaScript components and cannot be used right away, except select modern browsers can load them as modules or other ES6/ES7 applications.

ES5 Basic example

You've loaded the library and you're ready to go:

// your script
var myModal = new BSN.Modal('[data-bs-toggle="modal"]', options);

Basic Example

You can import the entire library into your application and roll it out:

import BSN from "@thednp/bootstrap.native";

let myBtnInit = new BSN.Button('#myBtnID');

Alternatively you can use individual components as modules:

import { Button } from '@thednp/bootstrap.native'

let myBtnInit = new Button('#myBtnID');

Notice the notation, we're not using new BSN.Button() in this case.

npm

This package can be installed using npm by using the command below.

$ npm install @thednp/bootstrap.native

Dynamic Content

Go the the demo page, open the console and type in BSN and hit Enter, you get the following object:

/* BSN for Bootstrap 4+
----------------------- */
BSN = {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
  initCallback: function(lookup){},
  removeDataAPI: function(lookup){},
  Listener: (@thednp/event-listener)
}

You can now use the initCallback in combination with various events, like so:

// BSN for Bootstrap 4+
document.addEventListener('eventName', function(){
  BSN.initCallback(document.getElementById('myContainer'));
}, false);

You might want to use events like turbolinks:load (discussed here) or events triggered by AJAX loading content.

In other cases you may want to remove components from your elements, there is another callback removeDataAPI

// BSN for Bootstrap 4+
document.addEventListener('eventName', function(){
  BSN.removeDataAPI(document.getElementById('myContainer'));
}, false);

RequireJS, CommonJS

The Native JavaScript for Bootstrap is compatible with anything you want to build for, thanks to its TypeScript source and tools like Vite. It will work correctly in CommonJS, and comes with good stuff like TREE SHAKE.

The library can be loaded easily via RequireJS or CommonJS, so if you are using a module loader, you can also use this library via require() as well. Here's how to do it:

// reference the library as dependency
var BSN = require("@thednp/bootstrap.native");

// Create a Button instance:
var btn = new BSN.Button(element,option);

Alternatively you can use individual components as modules:

var { Button } = require("@thednp/bootstrap.native");

var myBtnInit = new Button('#myBtnID');

Important note: If you are working in a virtual browser environment (i.e. running front-end tests in NodeJS), bootstrap.native requires both window and document to be in scope. You will need to use a mock browser.

Note About the Factory Methods

As mentioned before, the object properties of the exported object, when using require(), are actual classes when document and window are given - in which case we are sure to be facing an actual browser - and if absent, will be factory methods.

So when using bootstrap.native inside of a NodeJS app, make sure you create a proper Browser-like environment first to avoid unexpected behavior.

Was this helpful or you want to report an error?

How To Direct Links

Clone this wiki locally