INTRO 🔔
Hello World! 👋
Today we are discussing another custom hook🪝 named useFluidFont
🔥. In this post, we will discuss this hook usage, code and use case.
USAGE 🔔
As a front-end developer 😎, I know responsive designs
are crucial in web development. Changing font size based on screen size is the main important thing in responsive design. Usually, we use media queries in CSS 🎨
to achieve this. However, it leads to lengthy code and multiple media queries for different screen sizes 🙁. But, by using the useFluidFont
🔥 custom hook, we can achieve the same output with efficient code practice 😊.
WITH MEDIA QUERIES 🔕
.container {
font-size: 24px;
}
@media screen and (max-width:1280px) {
.container {
font-size: 22px;
}
}
@media screen and (max-width:1140px) {
.container {
font-size: 20px;
}
}
@media screen and (max-width:980px) {
.container {
font-size: 18px;
}
}
@media screen and (max-width:720px) {
.container {
font-size: 16px;
}
}
WITH CUSTOM HOOK 🔔
📌 NOTE: before creating this hook, we need to create another hook named
useWinowResize
🚀. It is already created on our custom hook series. Please check 👉🏻 useWindowResize
import { useCallback } from "react";
import { useWindowResize } from "./useWindowResize";
export const useFluidFont = () => {
const { width } = useWindowSize();
const getFont = useCallback(
(minFont, minWidth, maxFont, maxWidth) => {
if (width <= minWidth) {
return minFont;
} else if (width >= maxWidth) {
return maxFont;
} else {
return `calc(${minFont}px + (${maxFont} - ${minFont}) * ((100vw - ${minWidth}px) / (${maxWidth} - ${minWidth})))`;
}
},
[width]
);
return getFont;
};
USE CASE 🔔
import React from "react";
import "./styles.css";
import { useFluidFont } from "./useFluidFont";
function App() {
const font = useFluidFont();
return (
<div>
<div className="container">HELLO WORLD</div>
<div style={{ fontSize: font(16, 720, 24, 1280) }}>HELLO WORLD</div>
</div>
);
}
export default App;
CONCLUSION 🔔
By using the above hook, we can change the font size of application responsively without using multiple CSS media queries.
I hope you people like the useFluidFont hook. We will meet with another hook in another post.
Peace 🙂