This is an article from MaxRozen.com. You can read the original here.
It’s no secret React has a library discoverability problem.
While the number of stars in GitHub and weekly downloads in npm might be a good starting point for finding quality libraries, normally you have to wade through a lot of reddit, hacker news, dev.to and individual blog posts to find the best ones.
In this (continually updated) article, I’ll be adding libraries (excluding component libraries, I track those here) worth talking about on a single page.
Table of Contents
- Accessibility
- Animation
- Browser Features
- Data Fetching Libraries
- Data Visualisation
- Forms
- State Management
- Testing
Accessibility
React Aria provides you with Hooks that provide accessibility for your components, so all you need to worry about is design and styling. Particularly useful for those building design systems.
Example usage - useButton:
import { useButton } from '@react-aria/button';
function Button(props) {
let ref = React.useRef();
let { buttonProps } = useButton(props, ref);
return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}
<Button onPress={() => alert('Button pressed!')}>Press me</Button>;
Animation
Animation adds soul to otherwise boring things. These libraries let you build the web app equivalent of Pixar’s Intro Animation, but in React.
Both libraries have similar APIs and support spring physics over time-based animation, though Framer Motion seems to be used more often on GitHub.
Framer Motion is an animation and gesture library built by Framer. The added benefit of Framer Motion is that your designers can build animations in Framer, then hand-off designs to be accurately implemented using Framer’s own library.
React Spring uses spring physics rather than time-based animation to animate your components. Relative to Framer Motion, React Spring has been under development for longer, with a greater number of open-source contributors.
Browser Features
Ever been asked to implement random features that someone on the product team saw on another website and thought was cool? These libraries save you time on building those features.
useClippy is a React hook that lets you read and write to your user’s clipboard. Particularly useful for improving UX, letting you save your users from double clicking on your data fields, by providing them a button to copy values.
ReactPlayer is an awesome library that lets you embed video from major sources (YouTube, Facebook, Twitch, SoundCloud, and more), and define your own controls to the video.
React Toastify allows you to add fancy in-app notifications (like the “Message Sent” notification in Gmail) to your React app with only four additional lines of code.
Data Fetching Libraries
You might be wondering why you’d even need a data fetching library, when you could use useEffect and fetch(). The short answer is that these libraries also handle caching, loading and error states, avoiding redundant network requests, and much more.
You could spend hundreds of hours implementing these features in a Redux-like state manager, or just install one of these libraries.
React Query lets you request data from the same API endpoint (for example api/users/1) across multiple components, without resulting in multiple network requests.
Similar to React Query (in fact, based on the same premise, see this issue for more info), SWR is another data fetching library worth checking out. SWR has the added security of being used by Vercel in production as part of their platform.
Data Visualisation
Everyone wants to have beautiful charts, but nobody wants to learn no complicated-ass D3
- Ronnie Coleman, probably
If you’ve ever used a popular charting library such as Recharts or Charts.js, you’ll know it’s surprisingly easy to reach the limits of what a charting library can do for you.
visx is different, in that it provides you with lower-level React components that are much closer to D3 than other charting libraries. This makes it easier to build your own re-usable charting library, or hyper-customised charts.
Forms
Forms suck. Take it from someone who once had to build a “smart” form with 26 possible fields to fill out - you want to pass off as much as possible to your form library, leaving you with only quick field names to enter.
React Hook Form is different to other form libraries, in that by default, you’re not building controlled components and watching their state. This means your app’s performance won’t get slower as you add more fields to your form.
On top of that, it’s probably one of the best documented libraries out there - every example has a CodeSandbox, making it easy to fork and try out your particular use case.
State Management
There’s been a fair bit of innovation in state management since the early days of Redux, it’s worth taking a look again if you’re interested in using global state.
Recoil is a state management library - think Redux meets React Hooks, minus the boilerplate.
Redux Toolkit (or RTK), is the official, opinionated way to manage your state using Redux.
RTK greatly reduces the amount of boilerplate necessary for using Redux, provides sensible defaults, and keeps the same immutable update logic that we know and love.
XState is a library that lets you formalise your React app as a finite state machine.
State machines aren’t a particularly new concept, but developers have only recently started to realise that maybe our apps could be less buggy if we explicitly define the states they can be in, and the inputs required to transition between states.
XState also generates charts for you based on your app’s xstate configuration, meaning your documentation will stay up to date as you code.
Testing
If you haven’t started a new create-react-app project in a while, you can be forgiven for not having heard of React Testing Library (RTL) yet.
RTL replaces Enzyme in your testing stack. While both libraries provide methods for rendering React components in tests, RTL exposes functions that nudge developers away from testing implementation details, and towards testing functionality.
Top comments (0)