5 Popular libraries you should know as a React Developer
Tags: webdev, react, javascript, productivity
Published: 2023-05-01 05:49:22

 
On your journey to becoming well-rounded **React** developers, you would have already come across various libraries, these might have also been on your radar.

So here is a list of 5 popular libraries that can help you to increase your productivity.

## 1.React-Mentions
This will help you to mention into textarea as you are used to on Facebook or Twitter.

**Demo**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvq7zhh78il1yjvp2x32.png)

**Example**
```
<MentionsInput value={this.state.value} onChange={this.handleChange}>
  <Mention
    trigger="@"
    data={this.props.users}
    renderSuggestion={this.renderUserSuggestion}
  />
  <Mention
    trigger="#"
    data={this.requestTag}
    renderSuggestion={this.renderTagSuggestion}
  />
</MentionsInput>
```
NPM: [https://www.npmjs.com/package/react-mentions](https://www.npmjs.com/package/react-mentions)
Website: [https://react-mentions.vercel.app](https://react-mentions.vercel.app)


## 2.React-Cropper

This library has dependency on [Cropperjs](https://fengyuanchen.github.io/cropperjs/)
This provides image cropping functionality and It allows user to select an area of image and crop it to their desired area.
Cropperjs is highly customizable and supports a wide range of features, such as zooming, rotating, and scaling images

**Demo**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7t0wkwd7veblrs8z38m.png)

**Example**
```
import React, { useRef } from "react";
import Cropper, { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<ReactCropperElement>(null);
  const onCrop = () => {
    const cropper = cropperRef.current?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};
```
NPM: [https://www.npmjs.com/package/react-cropper](https://www.npmjs.com/package/react-cropper)
Webiste: [https://react-cropper.github.io/react-cropper/](https://react-cropper.github.io/react-cropper/)



## 3.React-Blurhash
This provides a way to generate and display placeholder for images and uses a technique called as [Blurhash](https://github.com/woltapp/blurhash)

**Demo**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhsmg8uehjoowlx44fcc.png)

**Example**
``` 
<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={400}
  height={300}
  resolutionX={32}
  resolutionY={32}
  punch={1}
/>
```
NPM: [https://www.npmjs.com/package/react-blurhash](https://www.npmjs.com/package/react-blurhash)
Website: [https://blurha.sh](https://blurha.sh)



 
## 4.React-Use
This is a popular library for React Hooks that provides a reusable set of modular

here are some hooks provided by react-use

- [useMedia](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo) - tracks state of a CSS media query
- [useWindowScroll](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs) - tracks Window scroll position
- [useNetworkState](https://github.com/streamich/react-use/blob/HEAD/docs/useNetworkState.md) - tracks the state of browser's network connection
- [useAudio](https://github.com/streamich/react-use/blob/HEAD/docs/useAudio.md) - plays audio and exposes its controls

- [useEffectOnce](https://github.com/streamich/react-use/blob/HEAD/docs/useEffectOnce.md) - a modified version of **useEffect** that runs only once

NPM: [https://www.npmjs.com/package/react-use](https://www.npmjs.com/package/react-use)
Website:[https://github.com/streamich/react-use](https://github.com/streamich/react-use)

## 5.React-Linkify
This provides a simple and customizable way to detect and creates links within text content

**Demo**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qky2371z5j31ybogam7h.png)

**Example**

```
import React from 'react';
import Linkify from 'react-linkify';

function MyComponent() {
  const text = 'See source code at https://github.com/tasti/react-linkify/.';

  return (
    <Linkify>
      <p>{text}</p>
    </Linkify>
  );
}
```
NPM: [https://www.npmjs.com/package/react-linkify](https://www.npmjs.com/package/react-linkify)
Website: [http://tasti.github.io/react-linkify/](http://tasti.github.io/react-linkify/)