useWindowSize
An example of a Reactive component that gets the browser's window size.
If the size of the browser changes, the width
and height
state values change.
0 x 0
Reactive Adapter
import { reactive } from "@cfcs/core";
const REACTIVE_ADAPTER = ({ onInit, onDestroy }) => {
const obj = reactive({ width: 0, height: 0 });
const callback = () => {
obj.width = window.innerWidth;
obj.height = window.innerHeight;
};
onInit(() => {
window.addEventListener("resize", callback);
callback();
});
onDestroy(() => {
window.removeEventListener("resize", callback);
});
return obj;
};
Frameworks
- React
- Vue@2
- Vue@3
- Svelte
You can create a Reactive Component by importing the @cfcs/react
module and using the useReactive
function.
import { useReactive } from "@cfcs/react";
function useWindowSize() {
return useReactive(REACTIVE_ADAPTER);
}
export function App() {
const {
width,
height,
onResize,
} = useWindowSize();
return <div>{width}x{height}</div>;
}