react-window-hooks
v2.3.2TypeScript
an union of usefull window hooks for react
0/weekUpdated 1 years agoUnpacked: 36.0 KB
Published by lucaspedroso
npm install react-window-hooksreact-window-hooks
usefull window hooks for react (NextJS compatible)
How to use
``javascript`
import hooks from 'react-window-hooks'
available hooks
$3
`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
{showComponent && (
component to detect if it's outside
)}
)
}
`
$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 ;
height: 1000,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
go to the bottom of this section
);
};
`
$3
`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
My Content Here
;};
`
$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}
)
}
``