In the field of front-end development, small libraries with low integration costs and powerful functions are development tools that can significantly improve efficiency and user experience. Here are several small but powerful front-end libraries that you can't miss in 2025.
Original Source URL: https://en.kelen.cc/share/small-but-powerful-treasure-libraries-for-front-end-development
radash
Radash is a lightweight, functional programming utility library based on TypeScript. It is more modern than lodash. It is built on JavaScript's native methods, discarding the outdated functions in lodash and adding features like tryit and retry. Its source code is clear, and many functions can be directly copied and used. It is very efficient when dealing with operations on object arrays. For example:
import { sortBy } from "radash";
const users = [
{ name: "Alice", score: 85 },
{ name: "Bob", score: 70 },
{ name: "Charlie", score: 90 },
];
const sortedUsers = sortBy(users, "score", "desc");
console.log(sortedUsers);
In the above code, the sortBy function of radash is used to sort the user array in descending order according to the score property.
use-debounce
use-debounce is designed specifically for React development. It is less than 1Kb in size, is compatible with underscore/lodash, and supports server-side rendering. It can effectively avoid frequent interface calls when dealing with frequently triggered events. Here is a code example:
import React, { useState } from "react";
import { useDebounce } from "use-debounce";
const DebounceExample = () => {
const [inputValue, setInputValue] = useState("");
const [debouncedValue] = useDebounce(inputValue, 300);
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<div>
<input type="text" onChange={handleChange} placeholder="Enter content" />
<p>Debounced value: {debouncedValue}</p>
</div>
);
};
export default DebounceExample;
In this example, useDebounce debounces the value of the input box for 300 milliseconds.
timeago.js
timeago.js is only 2Kb. It is used to format dates into relative expressions to the current time, such as "a few minutes ago", "a few days ago", etc., and supports multiple languages. It can make time display more user-friendly in scenarios such as social media and forums. The usage method is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0" />
<title>timeago.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"></script>
</head>
<body>
<time datetime="2024-12-01T12:00:00Z" class="timeago">2024-12-01 12:00:00</time>
<script>
const elements = document.querySelectorAll(".timeago");
elements.forEach((element) => {
timeago.render(element);
});
</script>
</body>
</html>
This code uses timeago.js to convert the specified time into a relative time display.
react-use
react-use brings together various practical Hooks, covering functions from tracking battery status, geolocation, to setting favorites, debouncing, and video playback. Taking the use of useGeolocation to obtain geolocation as an example:
import React from "react";
import { useGeolocation } from "react-use";
const GeolocationExample = () => {
const { latitude, longitude, error, isLoading } = useGeolocation();
if (isLoading) return <div>Fetching location...</div>;
if (error) return <div>Error fetching location: {error.message}</div>;
return (
<div>
<p>Latitude: {latitude}</p>
<p>Longitude: {longitude}</p>
</div>
);
};
export default GeolocationExample;
The above code uses the useGeolocation Hook of react-use to obtain the user's geolocation.
Day.js
Day.js is a simple date library with only 2Kb. It is basically compatible with Moment.js and supports multiple languages. It is concise and efficient in handling date parsing, formatting, calculation, comparison, etc. Here is an example:
import dayjs from "dayjs";
// Format the date
const formattedDate = dayjs("2024-12-01").format("YYYY-MM-DD HH:mm:ss");
console.log(formattedDate);
// Date calculation
const futureDate = dayjs().add(7, "day");
console.log(futureDate.format("YYYY-MM-DD"));
This code demonstrates the date formatting and calculation functions of Day.js.
filesize.js
filesize.js can convert numbers or strings into human-readable file sizes. Its minified version is only 2.94kb. It is widely used in scenarios such as file management systems and cloud storage applications. The usage method is as follows:
import filesize from "filesize";
const byteSize = 1048576; // 1MB
const humanSize = filesize(byteSize);
console.log(humanSize);
The above code converts the number of bytes into a human-readable file size format.
driver.js
driver.js is a page guidance library implemented in native JavaScript. It is easy to get started, and only 5kb after gzip compression. After a new product is launched or an application is updated, it can help users get familiar with new features. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0" />
<title>driver.js Example</title>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css" />
</head>
<body>
<button id="targetButton">Click Me</button>
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<script>
const driver = new Driver();
driver.defineSteps([
{
element: "#targetButton",
popover: {
title: "This is a button",
description: "Click it to perform some operations",
},
},
]);
driver.start();
</script>
</body>
</html>
This code uses driver.js to add a guidance prompt to the button.
@formkit/drag-and-drop
@formkit/drag-and-drop is a small drag-and-drop library about 4Kb. It is simple, flexible, and framework-independent, adhering to the data-first concept. Here is an example of implementing a file drag-and-drop upload function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0" />
<title>File Drag-and-Drop Upload Example</title>
<style>
#dropzone {
border: 2px dashed #ccc;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="dropzone">Drag files here</div>
<script src="https://unpkg.com/@formkit/drag-and-drop/dist/drag-and-drop.umd.js"></script>
<script>
const dropzone = document.getElementById("dropzone");
const { dropzone: dz } = createDropzone(dropzone, {
onDrop(files) {
files.forEach((file) => {
console.log("Uploading file:", file.name);
// You can add the actual file upload logic here
});
},
});
</script>
</body>
</html>
This example implements a simple file drag-and-drop upload function through @formkit/drag-and-drop.
These small but powerful front-end libraries are powerful and can meet a variety of development needs. In front-end development in 2025, you might as well try them to improve the efficiency of your projects.
More articles can be found at: https://en.kelen.cc/
Top comments (1)
Thanks