1.2.5 • Published 3 months ago
react-window-hooks v1.2.5
react-window-hooks
usefull window hooks for react (NextJS compatible)
How to use
import hooks from 'react-window-hooks'
available hooks
useClickOutside
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 (
<div>
<p>Outside component</p>
{showComponent && (
<div ref={ref}>
component to detect if it's outside
</div>
)}
</div>
)
}
useScrollTo
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 (
<>
<div ref={elementRef}>component to be scrolled into </div>;
<div
style={{
height: 1000,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
go to the bottom of this section
</div>
<button onClick={goesDirectToTheSection}>Goes direct to</button>
<button onClick={goesScrollingSmoothlyToSection}>Scroll Smoothly</button>
</>
);
};
useWindow (NextJS or SSR)
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 <div>My Content Here</div>;
};
useWindowResize
import React from "react";
import { useWindowSize } from "react-window-hooks";
export const ExampleUseWindowSize = () => {
const { width, height } = useWindowSize()
return (
<>
<div>height: {height}px</div>
<div>width: {width}px</div>
</>
)
}
useLocalStorageState
import { useLocalStorageState } from "react-window-hooks";
type ProfileT = {
email: string
avatar: string
}
const ExampleUseLocalStorage = () => {
const [profile, setProfile] = useLocalStorageState<ProfileT>('profile', {
email: '',
avatar: '',
})
return (
<div>
<h1> {profile.email} </h1>
<img src={profile.avatar} />
</div>
)
}
useQueryState
import { useQueryState } from "react-window-hooks";
type ProfileT = {
email: string
avatar: string
}
const ExampleUseQueryState = () => {
const [profile, setProfile] = useQueryState<ProfileT>('profile', {
email: '',
avatar: '',
})
return (
<div>
<h1> {profile.email} </h1>
<img src={profile.avatar} />
</div>
)
}
1.2.5
3 months ago
1.2.0
6 months ago
1.1.1
6 months ago
1.1.9
6 months ago
1.1.7
6 months ago
1.1.6
6 months ago
1.2.4
5 months ago
1.1.5
6 months ago
1.2.3
5 months ago
1.1.4
6 months ago
1.2.2
5 months ago
1.1.3
6 months ago
1.2.1
6 months ago
1.1.2
6 months ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago