browser-ui-stores
- bodyScrollHeight$
- bodyScrollHeightPassive$
- bodyScrollSize$
- bodyScrollSizePassive$
- bodyScrollWidth$
- bodyScrollWidthPassive$
- documentVisible$
- innerHeight$
- innerHeightPassive$
- innerWidth$
- innerWidthPassive$
- orientation$
- prefersColorScheme$
- prefersColorSchemeDarkDefault$
- scrollX$
- scrollXPassive$
- scrollY$
- scrollYPassive$
- viewportSize$
- viewportSizePassive$
- windowScroll$
- windowScrollPassive$
Ƭ ColorScheme: "light" | "dark"
src/lib/appearance/prefers-color-scheme.ts:4
Ƭ Orientation: "landscape" | "portrait"
src/lib/viewport/orientation.ts:4
Ƭ ReadonlyStore<T>: Object
A store that can have subscribers and emit values to them. It also provides the current value upon subscription. It's readonly in the sense that it doesn't provide direct set/update methods, unlike {@link Store}, therefore its value can only be changed by a {@link StartHandler} (see also {@link makeReadonlyStore}).
| Name |
|---|
T |
| Name | Type |
|---|---|
content |
() => T |
nOfSubscriptions |
() => number |
subscribe |
(subscriber: Subscriber<T>) => Unsubscribe |
node_modules/universal-stores/dist/index.d.ts:33
Ƭ Subscriber<T>: (current: T) => void
| Name |
|---|
T |
▸ (current): void
A generic subscriber that takes a value emitted by a signal as its only parameter.
| Name | Type |
|---|---|
current |
T |
void
node_modules/@cdellacqua/signals/dist/index.d.ts:2
Ƭ Unsubscribe: () => void
▸ (): void
A function that's used to unsubscribe a subscriber from a signal.
void
node_modules/@cdellacqua/signals/dist/index.d.ts:4
• Const bodyScrollHeight$: ReadonlyStore<number>
A readonly store that contains the scrollHeight of the body.
Note that using this store will append a style element to the head of the document to position the body in 'relative' mode element will be appended to the head of the document, so that you can still override when needed by editing the body inline style.
• Const bodyScrollHeightPassive$: ReadonlyStore<number>
A readonly store that contains the scrollHeight of the body (uses a passive event listener).
Note that using this store will append a style element to the head of the document to position the body in 'relative' mode element will be appended to the head of the document, so that you can still override when needed by editing the body inline style.
• Const bodyScrollSize$: ReadonlyStore<{ height: number ; width: number }>
A readonly store that contains the scroll size of the body.
Note that using this store will append a style element to the head of the document to position the body in 'relative' mode element will be appended to the head of the document, so that you can still override when needed by editing the body inline style.
• Const bodyScrollSizePassive$: ReadonlyStore<{ height: number ; width: number }>
A readonly store that contains the scroll size of the body (uses a passive event listener).
Note that using this store will append a style element to the head of the document to position the body in 'relative' mode element will be appended to the head of the document, so that you can still override when needed by editing the body inline style.
• Const bodyScrollWidth$: ReadonlyStore<number>
A readonly store that contains the scrollWidth of the body.
Note that using this store will append a style element to the head of the document to position the body in 'relative' mode element will be appended to the head of the document, so that you can still override when needed by editing the body inline style.
• Const bodyScrollWidthPassive$: ReadonlyStore<number>
A readonly store that contains the scrollWidth of the body (uses a passive event listener).
Note that using this store will append a style element to the head of the document to position the body in 'relative' mode. You will still be able to override tp needed by editing the body inline style.
• Const documentVisible$: ReadonlyStore<boolean>
A readonly store that contains true if the document is visible, false otherwise.
• Const innerHeight$: ReadonlyStore<number>
A readonly store that contains the innerHeight of the window.
• Const innerHeightPassive$: ReadonlyStore<number>
A readonly store that contains the innerHeight of the window (uses a passive event listener).
• Const innerWidth$: ReadonlyStore<number>
A readonly store that contains the innerWidth of the window.
• Const innerWidthPassive$: ReadonlyStore<number>
A readonly store that contains the innerWidth of the window (uses a passive event listener).
• Const orientation$: ReadonlyStore<Orientation>
A readonly store that indicates whether the viewport is in landscape or portrait mode.
src/lib/viewport/orientation.ts:9
• Const prefersColorScheme$: ReadonlyStore<ColorScheme>
A readonly store that contains the preferred color scheme. It defaults to 'light' if no explicit preference has been set by the user agent.
src/lib/appearance/prefers-color-scheme.ts:11
• Const prefersColorSchemeDarkDefault$: ReadonlyStore<ColorScheme>
A readonly store that contains the preferred color scheme. It defaults to 'dark' if no explicit preference has been set by the user agent.
src/lib/appearance/prefers-color-scheme.ts:21
• Const scrollX$: ReadonlyStore<number>
A readonly store that contains the current scrolling position on the X axis.
• Const scrollXPassive$: ReadonlyStore<number>
A readonly store that contains the current scrolling position on the X axis (uses a passive event listener).
• Const scrollY$: ReadonlyStore<number>
A readonly store that contains the current scrolling position on the Y axis.
• Const scrollYPassive$: ReadonlyStore<number>
A readonly store that contains the current scrolling position on the Y axis (uses a passive event listener).
• Const viewportSize$: ReadonlyStore<{ height: number ; width: number }>
A readonly store that contains the size of the viewport (innerWidth and innerHeight of the window).
• Const viewportSizePassive$: ReadonlyStore<{ height: number ; width: number }>
A readonly store that contains the size of the viewport (innerWidth and innerHeight of the window) (uses a passive event listener).
• Const windowScroll$: ReadonlyStore<{ x: number ; y: number }>
A readonly store that contains the current scrolling position (x and y).
• Const windowScrollPassive$: ReadonlyStore<{ x: number ; y: number }>
A readonly store that contains the current scrolling position (x and y) (uses a passive event listener).
▸ makeMediaQueryStore(mediaQueryString): ReadonlyStore<boolean>
Create a boolean ReadonlyStore whose value corresponds to whether or not a media query "matches".
Example usage:
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.| Name | Type | Description |
|---|---|---|
mediaQueryString |
string |
a media query string compatible with window.matchMedia. |
ReadonlyStore<boolean>
a boolean ReadonlyStore
src/lib/utils/media-query.ts:19
▸ makeScreenSizeStore(__namedParameters): ReadonlyStore<ScreenSize>
Creates a store that indicates the screen size based on the width or height of the viewport.
Example usage:
const screenSize$ = makeScreenSizeStore({
names: ['sm', 'md', 'lg'],
thresholds: [768, 992],
});
screenSize$.subscribe(({name}) =>
console.log(`Your screen is categorized as ${name}`),
);| Name | Type |
|---|---|
__namedParameters |
MakeScreenSizeStoreParams |
a readonly store