7 Small & Underrated React Libraries š„
Hey! Welcome back to my daily article! Today we will talk about React. But not about React.js concepts, best practices, or so. Today I will talk about 7 small and underrated React libraries that I like to use and that you might like.
Of course, you may already know some of them since I didnāt pick the smallest ones. I tried to balance being less known and popular enough to be maintained.
Also, you probably have others you know, so feel free to answer to share yours; I will try to add them to the following article of this series!
You can read the previous article of this series here:
5 Small and Hidden React libraries You Should Already Be Using
If you, like me, love finding small gems in the NPM directory to improve your development process, today is your luckyā¦javascript.plainenglish.io
1ļøā£ React TestingĀ Library
It is a lightweight testing library that makes it really easy to test React components. Oh, it also provides a simple and intuitive API for testing them, making the process even easier!
It is designed to be used with Jest, a popular testing framework for React.
As always, here is a code example using it (donāt worry, after the example, you have a link to the project, so you can check it in depth):
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
š Official Website
2ļøā£ React HookĀ Form
This is a cool one. This is a library that makes really easy to handle form state in React.
Basically, it provides a simple API for handling form state and validation, and it is built using React hooks.
Another pro is it has a small size and is very efficient! (It also works in React Native)
import { useForm } from 'react-hook-form';
const App = () => {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data) => { console.log(data) };
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" ref={register({ required: true })} />
{errors.firstName && 'First name is required'}
<input name="lastName" ref={register({ required: true })} />
{errors.lastName && 'Last name is required'}
<button type="submit">Submit</button>
</form>
);
};
š Official Website
3ļøā£ ReactĀ Scroll
As you will expect, this library is for scrolling. Basically, it helps to implement smooth scrolling in React apps. It provides an easy API (but with lots of optional settings) and is lightweight.
import { Link, animateScroll as scroll } from 'react-scroll';
const App = () => (
<div>
<Link to="section1" spy={true} smooth={true} duration={500}>
Section 1
</Link>
<Link to="section2" spy={true} smooth={true} duration={500}>
Section 2
</Link>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
</div>
);
š Official Website
4ļøā£ React Transition Group
This one is for implementing animations. Well, not every kind (for that, I recommend checking Framer Motion) but transitions.
If you need quick and easy animations, I recommend checking this one.
import { CSSTransition, TransitionGroup } from 'react-transition-group';
const App = () => (
<TransitionGroup>
<CSSTransition key={item.id} timeout={300} classNames="fade">
<div>Item</div>
</CSSTransition>
</TransitionGroup>
);
š Official Website
5ļøā£ React Lazy Load Image Component
Well, this one already says what it does in the title, but yeah, it helps implement lazy loading for images in your React app.
As you may know, it can help improve your website's performance by only loading images when needed. Quick and easy.
import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
const MyImage = ({ image }) => (
<div>
<LazyLoadImage
alt={image.alt}
height={image.height}
src={image.src} // use normal <img> attributes as props
width={image.width} />
<span>{image.caption}</span>
</div>
);
export default MyImage;
š Official Website
6ļøā£ React EasyĀ Edit
Now we have a library that you will use in very few particular cases, but hey, it is always good to know!
It is a library for implementing inline editing in React. It is really easy to use.
import React, { Component } from 'react';
import EasyEdit from 'react-easy-edit';
function App() {
const save = (value) => {alert(value)}
const cancel = () => {alert("Cancelled")}
return (
<EasyEdit
type="text"
onSave={save}
onCancel={cancel}
saveButtonLabel="Save Me"
cancelButtonLabel="Cancel Me"
attributes={{ name: "awesome-input", id: 1}}
instructions="Star this repo!"
/>
);
}
š Official Website
7ļøā£ React Beautiful Dnd
This library is not that small, and it is very popular butā¦ I really wanted to add it. I know there are lots of ādrag-and-dropā libraries out there, but this one is really easy to use; it is beautiful and customizable. Oh, and done by Atlassian (the creators of Trello and Jira, both apps use this library).
No code example since it is better to check all their examples here.
š Official Website
So, yeah, that is all the article. A short one, but I hope it was helpful and that you discovered at least one exciting library. I really enjoy doing this series; I will continue publishing more soon soā¦ make sure to follow if you liked it!
And if you know others small libraries like these, share them here so I can test and add them to the next article!