Configuration for state transformation and filtering via StateOptions
A PropertyDecorator that sets up automatic subscription to device type
Subscribes to: Device service
Updates: The decorated property with DeviceType ('desktop', 'tablet', or 'phone')
Viewport-aware: Automatically updates when viewport size changes
Lifecycle: Automatically subscribes in connectedCallback and
unsubscribes in disconnectedCallback
import { h, State } from '@stencil/core';
import { DeviceType, SelectDevice } from '@limetech/lime-web-components';
class MyComponent {
// The device service holds an object, so the type is read from `type`
@State()
@SelectDevice()
private deviceState: { type: DeviceType };
public render() {
return (
<div class={`layout-${this.deviceState?.type}`}>
<p>Viewing on: {this.deviceState?.type}</p>
</div>
);
}
}
import { h, State } from '@stencil/core';
import { DeviceType, SelectDevice } from '@limetech/lime-web-components';
class MyComponent {
// `map` picks the device type out of the state, so the property holds the
// plain string instead of the whole state object
@State()
@SelectDevice({ map: [(state: { type: DeviceType }) => state.type] })
private device: DeviceType;
public render() {
if (this.device === 'phone') {
return <button class="hamburger-menu">Menu</button>;
}
return (
<nav class="full-menu">
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
);
}
}
Decorator that subscribes to the current device type from the device service.
This decorator automatically updates the decorated property whenever the device type changes (typically when the viewport is resized). The device type indicates roughly how big the viewport is, not what actual device is being used. It's the recommended approach over manual subscriptions as it handles subscription lifecycle automatically.