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 Recipes
React Recipes comes with many hooks that we can use to do various things.
The useMedia hook lets us add media queries in JavaScript.
For instance, we can write:
import React from "react";
import { useMedia } from "react-recipes";
export default function App() {
const columnCount = useMedia(
["(min-width: 1500px)", "(min-width: 1000px)", "(min-width: 600px)"],
[5, 4, 3],
2
);
return (
<div style={{ columns: columnCount }}>
{Array(1000)
.fill()
.map((_, i) => (
<p>{i}</p>
))}
</div>
);
}
We have the useMedia hook to set the media query.
The first argument is an array of media queries.
The 2nd is the array of values for each media query.
The 3rd is the default value to return.
Then we can use the returned value as we wish.
In the example above, we used the media queries to set the number of columns.
The useOnClickOutside hook lets us listen for clicks outside an element.
For instance, we can write:
import React from "react";
import { useOnClickOutside } from "react-recipes";
export default function App() {
const ref = React.useRef();
const [isModalOpen, setModalOpen] = React.useState(false);
useOnClickOutside(ref, () => setModalOpen(false));
return (
<div>
{isModalOpen ? (
<div ref={ref}>modal</div>
) : (
<button onClick={() => setModalOpen(true)}>Open Modal</button>
)}
</div>
);
}
We used the useOnClickOutside hook with a ref.
The ref is passed to the element that we want to watch for clicks outside.
The hook takes a callback to run some code when we click outside an element.
The useOnlineStatus hook lets us listen for the online or offline events to see the current status.
For instance, we can use it by writing:
import React from "react";
import { useOnlineStatus } from "react-recipes";
export default function App() {
const onlineStatus = useOnlineStatus();
return (
<div>
<h1>{onlineStatus ? "Online" : "Offline"}</h1>
</div>
);
}
We called the useOnlineStatus hook to listen to the online status.
The usePrevious hook lets us get the previously set value of a state.
For example, we can write:
import React from "react";
import { usePrevious } from "react-recipes";
export default function App() {
const [count, setCount] = React.useState(0);
const prevCount = usePrevious(count);
return (
<div>
<p>
Now: {count}, before: {prevCount}
</p>
<button onClick={() => setCount(count => count + 1)}>Increment</button>
</div>
);
}
We use the usePrevious hook with the count state to return the count state’s previous value.
prevCount has the previous value of count .
The useScript hook lets us create a scrip tag with our code.
For instance, we can write:
import React from "react";
import { useScript } from "react-recipes";
export default function App() {
const [loaded, error] = useScript(
"https://code.jquery.com/jquery-2.2.4.min.js"
);
return (
<div>
<div>
Script loaded: <b>{loaded.toString()}</b>
</div>
{loaded && !error && (
<div>
Script function call response: <b>{$().jquery}</b>
</div>
)}
</div>
);
}
We called the useScript hook with the URL for our script.
We loaded jQuery and get the jQuery version with $().jquery .
loaded indicates that it’s loaded if it’s true ,
error has the error if there’s one.
Conclusion
React Recipes lets us use media queries, load scripts, watch online status, and get the previous value of a state.
