feat(🖥 Screen Observers): Added OrientationObserver & ScreenSizeObservers

src/components/OrientationObserver.ts

@@ -0,0 +1,14 @@
+import { RenderPropChildren, getComponent } from '@bluebase/core';
+
+export interface OrientationObserverProps {
+	children: RenderPropChildren<OrientationObserverState>;
+}
+
+export interface OrientationObserverState {
+	isLandscape: boolean;
+}
+
+/**
+ * # 🖥 Observes changes in Screen Orientation
+ */
+export const OrientationObserver = getComponent<OrientationObserverProps>('OrientationObserver');

src/components/ScreenSizeObserver.ts

@@ -0,0 +1,16 @@
+import { RenderPropChildren, getComponent } from '@bluebase/core';
+
+export type SCREEN_SIZE = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ScreenSizeObserverProps {
+	children: RenderPropChildren<SCREEN_SIZE>;
+}
+
+export interface ScreenSizeObserverState {
+	readonly size: SCREEN_SIZE;
+}
+
+/**
+ * # 🖥 Observes changes in Screen Size
+ */
+export const ScreenSizeObserver = getComponent<ScreenSizeObserverProps>('ScreenSizeObserver');

src/components/index.ts

@@ -59,6 +59,7 @@ export * from './MenuItem';
 export * from './Navigation';
 export * from './NavigationActions';
 export * from './Noop';
+export * from './OrientationObserver';
 export * from './Overline';
 export * from './PluginIcon';
 export * from './ProgressBar';
@@ -69,6 +70,7 @@ export * from './RadioGroup';
 export * from './Redirect';
 export * from './ResponsiveLayout';
 export * from './Row';
+export * from './ScreenSizeObserver';
 export * from './Slider';
 export * from './Snackbar';
 export * from './StatefulComponent';