browser-ui-stores
v2.1.2
Published
A collection of stores that monitor the size, orientation, color scheme and scroll of the browser window.
Downloads
49
Maintainers
Readme
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 install browser-ui-stores
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.