DEV Community

Uttam Sharma
Uttam Sharma

Posted on

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
Image description

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>
Enter fullscreen mode Exit fullscreen mode

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

Image description

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}
    />
  );
};
Enter fullscreen mode Exit fullscreen mode

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
Image description

Example

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

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

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
Image description

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

NPM: https://www.npmjs.com/package/react-linkify
Website: http://tasti.github.io/react-linkify/

Top comments (0)