Hooks contains our logic code in our React app.
We can create our own hooks and use hooks provided by other people.
In this article, we’ll look at some useful React hooks.
react-use
The react-use library is a big library with many handy hooks.
The useScrolling
hook lets us keep track of whether the user is scrolling an element or not.
To use it, we can write:
import React from "react";
import { useScrolling } from "react-use";
export default function App() {
const scrollRef = React.useRef(null);
const scrolling = useScrolling(scrollRef);
return (
<div ref={scrollRef} style={{ overflow: "scroll", height: 300 }}>
<div style={{ position: "fixed" }}>
{scrolling ? "Scrolling" : "Not scrolling"}
</div>
{Array(1000)
.fill()
.map((_, i) => (
<p key={i}>{i}</p>
))}
</div>
);
}
We create the ref that we pass into the element that we want to watch the scrolling for.
Also, we pass the ref to the element to the useScrolling
hook.
The hook returns the scrolling state of the element.
The useScrollbarWidth
hook returns the browser’s scrollbar width.
It’ll return undefiuned
until the DOM is ready.
For instance, we can write:
import React from "react";
import { useScrollbarWidth } from "react-use";
export default function App() {
const sbw = useScrollbarWidth();
return (
<div>
{sbw === undefined
? `DOM is not ready yet`
: `scrollbar width is ${sbw}px`}
</div>
);
}
We have the useScrollbarWidth
hook which returns the scroll bar width.
The useWindowSize
hook returns the dimensions of the browser window.
For instance, we can write:
import React from "react";
import { useWindowSize } from "react-use";
export default function App() {
const { width, height } = useWindowSize();
return (
<div>
<div>width: {width}</div>
<div>height: {height}</div>
</div>
);
}
We called the useWindowSize
hook to get the width and height of the window.
We can use the useMeasure
hook to get the dimensions of an HTML element.
It uses the resize observer API to do so.
For example, we can write:
import React from "react";
import { useMeasure } from "react-use";
export default function App() {
const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();
return (
<div ref={ref}>
<div>x: {x}</div>
<div>y: {y}</div>
<div>width: {width}</div>
<div>height: {height}</div>
<div>top: {top}</div>
<div>right: {right}</div>
<div>bottom: {bottom}</div>
<div>left: {left}</div>
</div>
);
}
x
and y
are the x and y coordinates of the top left corner of the element.
width
and height
are their width and height.
top
, right
, bottom
, and left
are the position values of the element.
The createBreakpoint
function creates the useBreakpoint
hook lets us detect screen width breakpoints.
For instance, we can write:
import React from "react";
import { createBreakpoint } from "react-use";
const useBreakpoint = createBreakpoint();
export default function App() {
const breakpoint = useBreakpoint();
if (breakpoint === "laptopL") return <div> very big Laptop </div>;
else if (breakpoint === "laptop") return <div> Laptop</div>;
else if (breakpoint === "tablet") return <div>Tablet</div>;
else return <div>Too small</div>;
}
We have the useBreakpoint
hook which returns the breakpoint that matches the screen size.
Also, we can change the breakpoints by passing in an object to createBreakpoint
:
import React from "react";
import { createBreakpoint } from "react-use";
const useBreakpoint = createBreakpoint({ XL: 1200, L: 700, S: 350 });
export default function App() {
const breakpoint = useBreakpoint();
if (breakpoint === "XL") return <div>XL</div>;
else if (breakpoint === "L") return <div>L</div>;
else if (breakpoint === "S") return <div>S</div>;
else return <div>too small</div>;
}
We pass in an object with the breakpoint names as the keys and the widths as the values.
Then we use useBreakpoint
the same way.
Conclusion
The react-use package has hooks to detect widths and detect scrolling.