an union of usefull window hooks for react
npm install react-window-hooksusefull window hooks for react (NextJS compatible)
``javascript`
import hooks from 'react-window-hooks'
`javascript
import React, { useState } from 'react'
import { useClickOutside } from "react-window-hooks";
const ExampleUseClickOutside = () => {
const [showComponent, setShowComponent] = useState(true)
const handleClickOutside = (isOutside: boolean) => {
if (isOutside) {
setShowComponent(false)
}
}
const { ref } = useClickOutside(handleClickOutside)
return (
Outside component
$3
`javascript
import React from "react";
import { useScrollTo } from "react-window-hooks";const App = () => {
const { elementRef, scrollToSection, scrollSmoothly } = useScrollTo();
const goesDirectToTheSection = (event) => {
event.preventDefault();
scrollToSection();
};
const goesScrollingSmoothlyToSection = (event) => {
event.preventDefault();
scrollSmoothly();
};
return (
<>
component to be scrolled into ;
style={{
height: 1000,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
go to the bottom of this section
`
`javascript
import React from "react";
import { useWindow } from "react-window-hooks";
const App = () => {
const { window } = useWindow();
// shows window object without breaking process
console.log(window);
return
$3
`javascript
import React from "react";
import { useWindowSize } from "react-window-hooks";export const ExampleUseWindowSize = () => {
const { width, height } = useWindowSize()
return (
<>
height: {height}px
width: {width}px
>
)
}
`$3
`javascript
import { useLocalStorageState } from "react-window-hooks";
type ProfileT = {
email: string
avatar: string
}const ExampleUseLocalStorage = () => {
const [profile, setProfile] = useLocalStorageState('profile', {
email: '',
avatar: '',
})
return (
{profile.email}

)
}`
$3
`javascript
import { useQueryState } from "react-window-hooks";type ProfileT = {
email: string
avatar: string
}
const ExampleUseQueryState = () => {
const [profile, setProfile] = useQueryState('profile', {
email: '',
avatar: '',
})
return (
{profile.email}

)
}
``