Don't Reinvent the Wheel! Or Utility Kits for Vue and React Applications

Introduction

Many developers, when it comes to standard web functionality, for example: storing boolean values, catching keystrokes or creating a stepper, often go to Google how to make this or that function and more often than not find a way to implement the functionality from scratch.

There is no point in reinventing the wheel!

This is the reaction that creators and users of reusable function libraries for various frameworks are looking at this approach with.

For Vue, this is, for example, vueuse. (for vue utility functions)

For React, the best one today is the latest and actively maintained one. reactuse (for react hooks)

What problem do these libraries solve?

The point is to make life easier for developers. Prepare in advance all possible functions that a developer may need in his work. If he uses a ready-made package, he will at least save his time, and at most reduce to a minimum the probability of his error or the admission of a bug in the code, because each function is tested separately. The use case is actually very large. With the help of such libraries, you can, for example:

• use web sockets

• send requests

• catch user geolocation

• use localStorage

• easy to create modal windows

And this is only a small part of all possible scenarios.

Why is VueUse awesome?

VueUse is one of the most popular libraries for vue. After all, it provides the most basic reusable functionality. Some believe that this is a standard, and without it, you can’t write vue applications. It’s hard to disagree, the library consists of more than two hundred functions, and follows the ideology described above.

Best Alternative to React

Praising vueuse as the best way to implement a great idea, we shouldn't forget about the top 1 library/framework on js – React. And here the situation was even worse. After all, there is no established, reliable, extensive and only library for React. There were attempts from different developers, but somewhere there are too few hooks (in React these are already hooks, yes), somewhere there is an undeveloped API.

To replace all of this, and as an alternative to vueuse, but in react, came reactuse.

Let's take, for example, and try to implement list management using the library and vanilla react

reactuse:

import { useList } from "@siberiacancode/reactuse";
function App() {
const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

We get value (array value), set (function to assign value to another array), push (function to add values ​​to array), removeAt (remove by index), updateAt (change by index), clear (clear array), reset (return to default value) Now the code to get all these states and functions in vanilla react:

const [value, setValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index + 1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);
const updateAt = (index: number, newValue: string) => {
setValue((prevList) =>
prevList.map((element, index) => (index === index ? newValue : element))
);
};
const clear = () => setValue([]);
const reset = () => setValue(initialValue);

And we get absolutely the same methods and state. And the code is an order of magnitude smaller and simpler.

The library is actively supported, new hooks are added, there is a convenient site with documentation, hooks use simple sources and have a more developed API. More than 80 hooks have been implemented so far. I would also like to note that there are absolutely new implementations that I have not seen anywhere:

• usePaint – to create a canvas for drawing. The canvas is set, and the hook allows you to draw on it, adjust the brush width, color, opacity, and the “draws” or “does not draw” status

• useStopwatch – for creating stopwatches

• useEyeDropper – to use the color picker

• a huge number of hooks for working with the user's device and browser API (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash and so on)

Conclusion

Such libraries should become a development standard, because they allow you not to get hung up on details that were invented long ago, you just need to connect them and use them.

reactuse links

npm – github