Browser Size React

Browser Size React is a very small javascript which detect browser size and only execute your code when it matches the predefined configuration.

Install:

yarn add browser-size-react

Configuration

Ignore this configuration if you want to use the default one. If not, please declare your config before:

window.browserSizeReact(options);

Customized configuration:

window.browserSizeReactConfig = {
    layoutSmartphone: {
        minimumWidth: 0,
        maximumWidth: 767,
        orientation: 'smartphone',
    },
    layoutTablet: {
        minimumWidth: 768,
        maximumWidth: 1079,
        orientation: 'tablet',
    },
    layoutDesktop: {
        minimumWidth: 1080,
        maximumWidth: Number.POSITIVE_INFINITY,
        orientation: 'desktop',
    }
};

How To Use

Import from node_modules:

import 'browser-size-react';

Use it:

window.browserSizeReact({
    onSmartphone: function() {
        // example: init the slider only for mobile screen
        // replace this code below by your code
        $('.my-slider').slick();
    },
    onTablet: () => {
        // example: destroy the slider on tablet
        // replace this code below by your code
        if($('.my-slider.slick-initialized').length) {
            $('.my-slider').slick('unslick');
        }
    },
    onDesktop: () => {
        // example: destroy the slider on desktop
        // replace this code below by your code
        if($('.my-slider.slick-initialized').length) {
            $('.my-slider').slick('unslick');
        }
    },

});

License:

It is FREE