Nancy's Preferred Machete

    bs-breakpoints
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    bs-breakpoints

    npm version dependencies Status devDependencies Status Build Status JavaScript Style Guide JS gzip size

    A plugin which detect Bootstrap 4 breakpoints and emit when there is a change.

    You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.

    Features:

    • Works with Bootstrap 4
    • Works without dependencies and jQuery
    • Can work with jQuery if detected
    • Detect custom breakpoints in CSS properties
    • Built in UMD to be used everywhere
    • Small, only 2kb and less if you gzip it

    Table of contents

    Install

    With npm or yarn

    npm install bs-breakpoints --save
     
    // yarn
    yarn add bs-breakpoints

    CDN

    CDN Link
    jsDelivr https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js
    jsDelivr, minified https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.min.js

    How to use it

    You should wait for the document ready event and call the init method to detect breakpoint changes. We expose one global variable available everywhere: bsBreakpoints

    Vanilla JS

    document.addEventListener('DOMContentLoaded', function () {
      bsBreakpoints.init()
    })

    With jQuery

    $(document).ready(function () {
      bsBreakpoints.init()
    })

    Use it with npm

    import bsBreakpoints from 'bs-breakpoints'

    For more examples check out this file.

    This library is UMD ready so you can use it everywhere.

    Methods

    init

    Will detect the current breakpoint and emit init.bs.breakpoint event.

    It'll add a listener on the window resize event and emit new.bs.breakpoint event.

    detectBreakpoint

    Detect the current breakpoint and return it.

    getCurrentBreakpoint

    Return the current breakpoint.

    Events

    init.bs.breakpoint

    Emitted just once when bsBreakpoints.init() is called.

    This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

    new.bs.breakpoint

    This event is emitted when there is a breakpoint changes.

    This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

    Support me

    If you want to thank me, you can support me and become my Patron

    License

    MIT

    Install

    npm i bs-breakpoints

    DownloadsWeekly Downloads

    1,502

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    28.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • johann-s