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.
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
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
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/
Top comments (0)