5 Popular libraries you should know as a React Developer

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

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
Website: https://react-mentions.vercel.app

2.React-Cropper

This library has dependency on 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

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
Webiste: 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

Demo

Example

<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={400}
  height={300}
  resolutionX={32}
  resolutionY={32}
  punch={1}
/>

NPM: https://www.npmjs.com/package/react-blurhash
Website: 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 - tracks state of a CSS media query
• useWindowScroll - tracks Window scroll position
• useNetworkState - tracks the state of browser's network connection

• useAudio - plays audio and exposes its controls

• useEffectOnce - a modified version of useEffect that runs only once

NPM: https://www.npmjs.com/package/react-use
Website: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

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
Website: http://tasti.github.io/react-linkify/