browser-ui-stores
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

browser-ui-stores

A collection of stores that monitor the size, orientation, color scheme and scroll of the browser window.

Compatible with Server-Side Rendering.

NPM Package

npm install browser-ui-stores

Documentation

Highlights

  • Check the user's preferred color scheme:
import {prefersColorScheme$} from 'browser-ui-stores';

prefersColorScheme$.subscribe((scheme) =>
	console.log(`Preferred color scheme: ${scheme}`),
);
  • Use responsive media query in your code:
import {makeScreenSizeStore} from 'browser-ui-stores';

const screenSize$ = makeScreenSizeStore({
	names: ['sm', 'md', 'lg'],
	thresholds: [768, 992],
});

screenSize$.subscribe(({name}) =>
	console.log(`Your screen is categorized as ${name}`),
);
  • Show a "go to the top" button when the user scrolls down the page:
import {scrollY$} from 'browser-ui-stores';

const goToTopButton = document.createElement('button');
goToTopButton.type = 'button';
goToTopButton.textContent = 'Go to the top';
goToTopButton.style.position = 'fixed';
goToTopButton.style.bottom = '0';
goToTopButton.style.right = '0';
goToTopButton.addEventListener('click', () => window.scrollTo(0, 0));
scrollY$.subscribe((scrollY) => {
	goToTopButton.style.display = scrollY > 10 ? 'inline-block' : 'none';
});

document.body.appendChild(goToTopButton);
  • Detect device orientation:
import {orientation$} from 'browser-ui-stores';

orientation$.subscribe((orientation) => {
	console.log(`Your screen is in ${orientation} mode`);
});
  • Create a store from any media query:
import {makeMediaQueryStore} from 'browser-ui-stores';

const prefersLightTheme$ = makeMediaQueryStore('(prefers-color-scheme: light)');
console.log(prefersLightTheme$.content()); // true or false depending on the browser/system settings.
prefersLightTheme$.subscribe(console.log); // will print true or false immediately and every time the preference changes.

Package Sidebar

Install

npm i browser-ui-stores

Weekly Downloads

32

Version

2.1.2

License

MIT

Unpacked Size

49.4 kB

Total Files

21

Last publish

Collaborators

  • cdellacqua