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