DEV Community

Cover image for 17 Libraries You Should Know if You Build with React
CopilotKit profile image Anmol Baranwal
Anmol Baranwal Subscriber for CopilotKit

Posted on • Updated on

17 Libraries You Should Know if You Build with React

#react #webdev #javascript #opensource

TL;DR

I have gathered React libraries you should know about to build many different types of projects and become a react wiz🧙‍♂️.

Each one of these is unique and has their own use case.
Don't forget to star them 🌟

Let's get to it!

Image description

1. CopilotKit - In-app AI chatbots, textareas and AI agents

copilotKit

 

Integrating AI features in React is tough, that's where Copilot comes into the picture. A simple and fast solution to integrate production-ready Copilots into any product!

You can integrate key AI features into React apps using two React components. They also provide built-in (fully-customizable) Copilot-native UX components like <CopilotKit />, <CopilotPopup />, <CopilotSidebar />, <CopilotTextarea />.

Get started with the following npm command.

npm i @copilotkit/react-core @copilotkit/react-ui
Enter fullscreen mode Exit fullscreen mode

Copilot Portal is one of the components provided with CopilotKit which is an in-app AI chatbot that can see the current app state and take action inside your app. It communicates with the app frontend and backend, as well as 3rd party services via plugins.

This is how you can integrate a Chatbot.

A CopilotKit must wrap all components which interact with CopilotKit. It’s recommended you also get started with CopilotSidebar (you can swap to a different UI provider later).

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}
Enter fullscreen mode Exit fullscreen mode

You can set up Copilot Backend endpoints using this quickstart quide.

After this, you can let Copilot take action. You can read on how to provide external context. You can do so using useMakeCopilotReadable and useMakeCopilotDocumentReadable react hooks.

"use client";

import { useMakeCopilotActionable } from '@copilotkit/react-core';

// Let the copilot take action on behalf of the user.
useMakeCopilotActionable(
  {
    name: "setEmployeesAsSelected", // no spaces allowed in the function name
    description: "\"Set the given employees as 'selected'\","
    argumentAnnotations: [
      {
        name: "employeeIds",
        type: "array", items: { type: "string" }
        description: "\"The IDs of employees to set as selected\","
        required: true
      }
    ],
    implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
  },
  []
);
Enter fullscreen mode Exit fullscreen mode

You can read the docs and check the demo video.

You can integrate Vercel AI SDK, OpenAI APIs, Langchain, and other LLM providers with ease. You can follow this guide to integrate a chatbot into your application.

The basic idea is to build AI Chatbots in minutes that can be useful for LLM-based applications.

The use cases are huge, and as developers, we should definitely try to use CopilotKit in our next project.

Star CopilotKit ⭐️

2. xyflow - to build node-based UIs with React.

xyflow

 

XYFlow is a powerful open source library for building node-based UIs with React or Svelte. It is a monorepo and provides React Flow & Svelte Flow. Let's see more on what we can do with React flow.

react flow

You can watch this video to understand React Flow in 60 seconds.

Some of the features are available in pro mode, but the ones in the free tier are more than enough to make a very interactive flow. React flow is written in TypeScript and tested with Cypress.

Get started with the following npm command.

npm install reactflow
Enter fullscreen mode Exit fullscreen mode

Here's how you can create two nodes, Hello & World, connected by an edge. The nodes have predefined initial positions to prevent overlap, and we're also applying styling to ensure sufficient space for rendering the graph.

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;
Enter fullscreen mode Exit fullscreen mode

This is how it looks. You can also add a label, change the type, and make it interactive.

hello world

You can see the full list of options in the API reference of React Flow along with components, hooks, and utils.

The best part is you can also add custom nodes. Within your custom nodes, you can render everything you want. You can define multiple source and target handles and render form inputs or charts. You can check out this codesandbox for an example.

You can read the docs and see example React Flow apps for Create React App, Next.js and Remix.

React Flow comes with several additional plugin components which can help you to make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar, and NodeResizer components.

For instance, you may have noticed dots in the background on many websites, enhancing the aesthetics. To implement this pattern, you can simply use the Background component in React Flow.

import { Background } from 'reactflow';

<Background color="#ccc" variant={'dots'} />  // this will be under React Flow component. Just an example.
Enter fullscreen mode Exit fullscreen mode

background component

In case, you're looking for a quick article, I recommend checking React Flow - A Library for Rendering Interactive Graphs by Webkid. React Flow is developed & Maintained by Webkid.

It has 19k+ Stars on GitHub and is on the v11.10.4 showcasing they are constantly improving and has 400k+ weekly downloads on the npm package. One of the best projects that you can use with ease.

stats

Star xyflow ⭐️

3. Zod + React Hook Form - A deadly combo for validation.

zod

 

The first question would be: why am I including Zod and React Hook form in the same option? Well, read it to find out.

Zod aims to be developer-friendly by minimizing duplicate type declarations. With Zod, you declare a validator once, and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.

Get started with the following npm command.

npm install zod
Enter fullscreen mode Exit fullscreen mode

This is how you can customize some common error messages when creating a string schema.

const name = z.string({
  required_error: "Name is required",
  invalid_type_error: "Name must be a string",
});
Enter fullscreen mode Exit fullscreen mode 
// It does provide lots of options
// validations
z.string().min(5, { message: "Must be 5 or more characters long" });
z.string().max(5, { message: "Must be 5 or fewer characters long" });
z.string().length(5, { message: "Must be exactly 5 characters long" });
z.string().email({ message: "Invalid email address" });
z.string().url({ message: "Invalid url" });
z.string().emoji({ message: "Contains non-emoji characters" });
z.string().uuid({ message: "Invalid UUID" });
z.string().includes("tuna", { message: "Must include tuna" });
z.string().startsWith("https://", { message: "Must provide secure URL" });
z.string().endsWith(".com", { message: "Only .com domains allowed" });
z.string().datetime({ message: "Invalid datetime string! Must be UTC." });
z.string().ip({ message: "Invalid IP address" });
Enter fullscreen mode Exit fullscreen mode

Please read the docs to know more about Zod.

It Works in Node.js and all modern browsers.

 

Now, comes the second part.

There are lots of form integrations available.

form

While Zod can validate objects, it will not affect your client and backend without customized logic.

React-hook-form is an excellent project for client validation. For instance, it can show input errors.

react hook form

Get started with the following npm command.

npm install react-hook-form
Enter fullscreen mode Exit fullscreen mode

This is how you can use the React Hook Form.

import { useForm, SubmitHandler } from "react-hook-form"


type Inputs = {
  example: string
  exampleRequired: string
}


export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)


  console.log(watch("example")) // watch input value by passing the name of it


  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />


      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}


      <input type="submit" />
    </form>
  )
}
Enter fullscreen mode Exit fullscreen mode

You can even isolate re-renders which improves overall performance.

You can read the docs.
Combining both is a good combo. Try it!

I discovered it through Shadcn, which uses it as the default for their form component. I've used it in a few projects myself, and it's been great. It offers a lot of flexibility, which is really helpful.

Star Zod ⭐️ Star React Hook Form ⭐️

4. React DND - Drag & Drop for React.

react dnd

 

I haven't fully implemented the Drag and Drop feature yet, and I often find myself confused about which option to choose. Another option I've come across is interactjs.io, which seems very useful based on the documentation I've read. It's pretty easy due to the detailed examples that they have provided.

drag and drop

But I'm only covering React DND for now.

Get started with the following npm command.

npm install react-dnd react-dnd-html5-backend
Enter fullscreen mode Exit fullscreen mode

Unless you're writing a custom one, you probably want to use the HTML5 backend that ships with React DnD.

This is how you can install react-dnd-html5-backend. Read docs.

This is the starting point.

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

This is how you can implement a drag-and-drop for a card very easily.

// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Please note that the HTML5 backend does not support the touch events. So it will not work on tablet and mobile devices. You can use the react-dnd-touch-backend for touch devices. Read docs.

import { TouchBackend } from 'react-dnd-touch-backend'
import { DndProvider } from 'react-dnd'

class YourApp {
  <DndProvider backend={TouchBackend} options={opts}>
    {/* Your application */}
  </DndProvider>
}
Enter fullscreen mode Exit fullscreen mode

This codesandbox dictates how we can properly use React DND.

You can see the examples of React DND.

They even have a clean feature where you can inspect what's happening internally with Redux.

You can enable Redux DevTools by adding a debugModeprop to your provider, with the value of true.

<DndProvider debugMode={true} backend={HTML5Backend}>
Enter fullscreen mode Exit fullscreen mode

It offers a good variety of component options, which I'll need to test out for myself. Overall, it seems pretty good, especially if you're just starting.

React DND is licensed under MIT and has over 20k Stars on GitHub, making it incredibly credible.

Star React DND ⭐️

5. Cypress - Fast testing for things running in the browser.

cypress

 

Recent years have proved the importance of testing, and options like Jest & Cypress make it incredibly simple.

But we're only going to cover Cypress as it is handy on its own.
Just an image can prove that Cypress is worth the effort.

cypress

Get started with the following npm command.

npm install cypress -D
Enter fullscreen mode Exit fullscreen mode

If you're not using Node or a package manager in your project or you want to try Cypress out quickly, you can always download Cypress directly from their CDN.

Once you install and open it. You will have to create a spec file with .cy.js.

spec file

Now, you can write and test your application (sample code).

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})
Enter fullscreen mode Exit fullscreen mode

Cypress offers a variety of options like cy.visit() or cy.contains(). Since I haven't used Cypress extensively, you'll need to explore it further on their documentation.

If it seems scary, then head over to this freeCodeCamp tutorial explaining Cypress for beginners. Freecodecamp videos are truly goldmine :D

Cypress has more than 45k stars on GitHub, and with its current v13 release, it's constantly improving.

Star Cypress ⭐️

6. Refine - open source Retool for Enterprise.

refine

 

Refine is a meta React framework that enables the rapid development of a wide range of web applications.

From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of CRUD application such as DevOps dashboards, e-commerce platforms, or CRM solutions.

e-commerce

You can set it with a single CLI command in under a minute.
It has connectors for 15+ backend services including Hasura, Appwrite, and more.

You can see the list of integrations which is available.

integrations

But the best part is that Refine is headless by design, thereby offering unlimited styling and customization options.

Due to the architecture, you can use popular CSS frameworks like TailwindCSS or create your styles from scratch.
This is the best part because we don't want to end up in constraints with styling for compatibility with particular libraries since everyone has their style and uses different UIs.

Get started with the following npm command.

npm create refine-app@latest
Enter fullscreen mode Exit fullscreen mode

This is how easy it is to add a login using Refine.

import { useLogin } from "@refinedev/core";
const { login } = useLogin();
Enter fullscreen mode Exit fullscreen mode

An overview of the structure of your codebase with Refine.

const App = () => (
  <Refine
    dataProvider={dataProvider}
    resources={[
      {
        name: "blog_posts",
        list: "/blog-posts",
        show: "/blog-posts/show/:id",
        create: "/blog-posts/create",
        edit: "/blog-posts/edit/:id",
      },
    ]}
  >
    /* ... */
  </Refine>
);
Enter fullscreen mode Exit fullscreen mode

You can read the docs.

Some example applications that you can see which is built with Refine:

They even provide templates which is why so many users love Refine.
You can see the templates.

templates

They have around 22k+ stars on GitHub.

Star Refine ⭐️

7. Tremor - React components to build charts and dashboards.

sample components

 

Tremor provides 20+ open source React components to build charts and dashboards built on top of Tailwind CSS to make visualizing data simple again.

community

Get started with the following npm command.

npm i @tremor/react
Enter fullscreen mode Exit fullscreen mode

This is how you can use Tremor to build things quickly.

import { Card, ProgressBar } from '@tremor/react';

export default function Example() {
  return (
    <Card className="mx-auto max-w-md">
      <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        Sales
      </h4>
      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
        $71,465
      </p>
      <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        <span>32% of annual target</span>
        <span>$225,000</span>
      </p>
      <ProgressBar value={32} className="mt-2" />
    </Card>
  );
}
Enter fullscreen mode Exit fullscreen mode

This is what will be generated based on that.

output

You can read the docs. Between, they use remix icons under the hood.

From the variety of components that I've seen, it's a good starting point. Trust me!

Tremor also provides a clean UI kit. How cool is that!

UI Kit

Tremor has 14k+ Stars on GitHub and has more than 280 releases which means it's continuously improving.

Star Tremor ⭐️

8. Watermelon DB - Reactive & asynchronous database for React & React Native.

watermelon DB

 

I'm not sure why there are so many options for the database; it's even tough to count them all. But if we're using React, Watermelon DB is a good choice. They're still on the v0.28 release even after 4k+ commits, which is a pretty big deal.

Rocket.chat uses Watermelon DB, which gives them a huge credibility.

Get started with the following npm command.

npm install @nozbe/watermelondb
Enter fullscreen mode Exit fullscreen mode

The first thing you need to do is create the model and later migrations (read docs).

import { appSchema, tableSchema } from '@nozbe/watermelondb'

export default appSchema({
  version: 1,
  tables: [
    // We'll add to tableSchemas here
  ]
})
Enter fullscreen mode Exit fullscreen mode

As per docs, when using WatermelonDB, you're dealing with Models and Collections. However, underneath Watermelon sits an underlying database (SQLite or LokiJS) which speaks a different language: tables and columns. Together, those are called a database schema.

You can read the docs and more on CRUD operations.

Star WatermelonDB ⭐️

9. Evergreen UI - React UI framework by Segment.

evergreen UI

 

A list without a UI framework is nearly impossible. There are a lot of popular options like Material, Ant Design, Next UI, and many more.

But we're covering Evergreen which is very good on its own.

Get started with the following npm command.

$ npm install evergreen-ui
Enter fullscreen mode Exit fullscreen mode

The foundations of any user interface are shown along with the options in detail on the Evergreen Segment website.

foundations

It provides a lot of components, and some are very good such as Tag Input or File uploader.

tag input

file uploader

You can see all the components that are provided with Evergreen UI.

Star Evergreen UI ⭐️

10. React Spring - fluid animations to elevate UI & interactions.

react spring

 

fluid animations

If you like react-motion but feel like your transitions aren’t smooth, it’s because it’s exclusively using React rendering.

If you like Popmotion but feel like you are limited by what you can do, it’s because it entirely skips React rendering.

react-spring gives both options, try it!

Get started with the following npm command.

npm i @react-spring/web
Enter fullscreen mode Exit fullscreen mode

This is how you can import a higher-order component to wrap things up for animations.

import { animated } from '@react-spring/web'

// use it.
export default function MyComponent() {
  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
      }}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

I decided to try React Spring because of the below codesandbox. It's amazing how many things can we do with React Spring.

You can read the docs.

They also provide a lot of examples that you can learn from.

examples

It provides an insane amount of options, such as useScroll, which allows you to create scroll-linked animations.

For instance, this codesandbox tells the usage of useScroll.

React Spring has around 27k+ Stars on GitHub.

Star React Spring ⭐️

11. React Tweet - Embed tweets in your React app.

react tweet

 

React Tweet allows you to embed tweets in your React application when using Next.js, Create React App, Vite, and more.
This library does not require using the Twitter API. Tweets can be rendered statically, preventing the need to include an iframe and additional client-side JavaScript.

It is an open source project by Vercel.

Get started with the following npm command.

npm i react-tweet
Enter fullscreen mode Exit fullscreen mode

To display tweets, we need to request data from Twitter's API. It's challenging to get rate-limited by this API, but it's possible if you rely solely on our provided endpoint for SWR (react-tweet.vercel.app/api/tweet/:id) because the server's IP address makes many requests to Twitter's API. This also applies to RSC, where the API endpoint isn't necessary, but the server still sends requests from the same IP address.

To avoid API limit, you can cache tweets using a database like Redis or Vercel KV. For instance, you can use Vercel KV.

import { Suspense } from 'react'
import { TweetSkeleton, EmbeddedTweet, TweetNotFound } from 'react-tweet'
import { fetchTweet, Tweet } from 'react-tweet/api'
import { kv } from '@vercel/kv'

async function getTweet(
  id: string,
  fetchOptions?: RequestInit
): Promise<Tweet | undefined> {
  try {
    const { data, tombstone, notFound } = await fetchTweet(id, fetchOptions)

    if (data) {
      await kv.set(`tweet:${id}`, data)
      return data
    } else if (tombstone || notFound) {
      // remove the tweet from the cache if it has been made private by the author (tombstone)
      // or if it no longer exists.
      await kv.del(`tweet:${id}`)
    }
  } catch (error) {
    console.error('fetching the tweet failed with:', error)
  }

  const cachedTweet = await kv.get<Tweet>(`tweet:${id}`)
  return cachedTweet ?? undefined
}

const TweetPage = async ({ id }: { id: string }) => {
  try {
    const tweet = await getTweet(id)
    return tweet ? <EmbeddedTweet tweet={tweet} /> : <TweetNotFound />
  } catch (error) {
    console.error(error)
    return <TweetNotFound error={error} />
  }
}

const Page = ({ params }: { params: { tweet: string } }) => (
  <Suspense fallback={<TweetSkeleton />}>
    <TweetPage id={params.tweet} />
  </Suspense>
)

export default Page
Enter fullscreen mode Exit fullscreen mode

You can directly use it in a very simple way.

<div className="dark">
  <Tweet id="1629307668568633344" />
</div>
Enter fullscreen mode Exit fullscreen mode

You can also make your own custom theme using several options if you don't prefer using the Twitter theme.

For instance, you can build your own tweet component but without the reply button like so:

import type { Tweet } from 'react-tweet/api'
import {
  type TwitterComponents,
  TweetContainer,
  TweetHeader,
  TweetInReplyTo,
  TweetBody,
  TweetMedia,
  TweetInfo,
  TweetActions,
  QuotedTweet,
  enrichTweet,
} from 'react-tweet'

type Props = {
  tweet: Tweet
  components?: TwitterComponents
}

export const MyTweet = ({ tweet: t, components }: Props) => {
  const tweet = enrichTweet(t)
  return (
    <TweetContainer>
      <TweetHeader tweet={tweet} components={components} />
      {tweet.in_reply_to_status_id_str && <TweetInReplyTo tweet={tweet} />}
      <TweetBody tweet={tweet} />
      {tweet.mediaDetails?.length ? (
        <TweetMedia tweet={tweet} components={components} />
      ) : null}
      {tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />}
      <TweetInfo tweet={tweet} />
      <TweetActions tweet={tweet} />
      {/* We're not including the `TweetReplies` component that adds the reply button */}
    </TweetContainer>
  )
}
Enter fullscreen mode Exit fullscreen mode

You can read the docs.

You can see the demo of the React Tweet on how it renders on the page.

They are on the v3.2 release which shows that they are constantly improving and have more than 46k+ weekly downloads.

Star React Tweet ⭐️

12. React 360 - Create amazing 360 and VR content using React.

react 360

 

Even though Facebook has archived it, many developers still find it useful enough to continue using.

React 360 is a library that utilizes a lot of React Native functionality to create virtual reality apps that run in your web browser.

It uses Three.js for rendering and comes as an npm package. By combining modern APIs such as WebGL and WebVR with the declarative power of React, React 360 helps simplify the process of creating cross-platform VR experiences.

Get started with the following npm command.

npm install -g react-360-cli
Enter fullscreen mode Exit fullscreen mode

There are a lot of things involved but you can add a vital functionality for interaction to your React VR app by using the VrButton.

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';

state = {
  count: 0
};

_incrementCount = () => {
  this.setState({
    count: this.state.count + 1
  })
}

<View style={styles.panel}>
        <VrButton
          onClick={this._incrementCount}
          style={styles.greetingBox}>
          <Text style={styles.greeting}>
            {`You have visited Simmes ${this.state.count} times`}
          </Text>
        </VrButton>
</View>
Enter fullscreen mode Exit fullscreen mode

You can add sounds other than lots of amazing things. See the examples on React Resources using React 360.

You can also read a blog by Log Rocket on Building a VR app with React 360.

This codesandbox represents a common example of what we can do with React 360.

Star React 360 ⭐️

13. React Advanced Cropper - to create croppers that suit your website.

react advanced croppers

react advanced croppers

 

React Advanced Cropper is the advanced library that allows you to create croppers suited for any website design. It means that you can change not only the cropper's appearance but also customize its behavior.

They are still in the beta version, meaning that the API could change in the future release.

The simple use case would be for designing software and cropping the image surface for further insights.

They have a lot of options so that makes it worth it.

options

options

Get started with the following npm command.

npm install --save react-advanced-cropper
Enter fullscreen mode Exit fullscreen mode

This is how you can use it.

import React, { useState } from 'react';
import { CropperRef, Cropper } from 'react-advanced-cropper';
import 'react-advanced-cropper/dist/style.css'

export const GettingStartedExample = () => {
    const [image, setImage] = useState(
        'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80',
    );

    const onChange = (cropper: CropperRef) => {
        console.log(cropper.getCoordinates(), cropper.getCanvas());
    };

    return (
        <Cropper
            src={image}
            onChange={onChange}
            className={'cropper'}
        />
    )
};
Enter fullscreen mode Exit fullscreen mode

You can read the docs and they provide 20+ options to customize it.

They provide mainly three types of cropper options: Fixed, Classic, and Hybrid along with the examples and code.

You can use React Advanced Cropper to make something exciting to show the world :)

Star React Advanced Cropper ⭐️

14. Mobx - Simple, scalable state management.

mobx

 

MobX is a proven library based on signals that simplifies and scales state management through functional reactive programming. It offers flexibility, enabling you to manage the application state independently of any UI framework.

This approach results in decoupled, portable, and easily testable code.

Here's how events are handled in any app using MobX.

event architecture

Image from the Docs

Get started with the following npm command.

npm install mobx-react --save
// CDN is also available
Enter fullscreen mode Exit fullscreen mode

This is what it would look like.

import { observer } from "mobx-react"

// ---- ES6 syntax ----
const TodoView = observer(
    class TodoView extends React.Component {
        render() {
            return <div>{this.props.todo.title}</div>
        }
    }
)

// ---- ESNext syntax with decorator syntax enabled ----
@observer
class TodoView extends React.Component {
    render() {
        return <div>{this.props.todo.title}</div>
    }
}

// ---- or just use function components: ----
const TodoView = observer(({ todo }) => <div>{todo.title}</div>)
Enter fullscreen mode Exit fullscreen mode

You can use external state in observer either using props, global variables, or using React Context.

You can read the docs about React Integration and npm docs.

You can also read 10-minute interactive introduction to MobX and React.

MobX has 27k+ Stars on GitHub and is used by 140K+ developers on GitHub.

Star Mobx ⭐️

15. React Virtualized - render large lists and tabular data.

react virtualized

 

Get started with the following npm command.

npm install react-virtualized --save
Enter fullscreen mode Exit fullscreen mode

Here's how you can utilize the ColumnSizer component in the Grid. Explore the demo (docs) to learn about the available options in detail.

import React from 'react';
import ReactDOM from 'react-dom';
import {ColumnSizer, Grid} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// numColumns, numRows, someCalculatedHeight, and someCalculatedWidth determined here...

// Render your list
ReactDOM.render(
  <ColumnSizer
    columnMaxWidth={100}
    columnMinWidth={50}
    columnCount={numColumns}
    width={someCalculatedWidth}>
    {({adjustedWidth, getColumnWidth, registerChild}) => (
      <Grid
        ref={registerChild}
        columnWidth={getColumnWidth}
        columnCount={numColumns}
        height={someCalculatedHeight}
        cellRenderer={someCellRenderer}
        rowHeight={50}
        rowCount={numRows}
        width={adjustedWidth}
      />
    )}
  </ColumnSizer>,
  document.getElementById('example'),
);
Enter fullscreen mode Exit fullscreen mode

You can read the docs and the demo.

They have provided React-window as a lighter-weight alternative, but this one is more popular in terms of release and stars so I covered this option. You can read which option is better for you: How is react-window different from react-virtualized?.

It is utilized by 85k+ developers and has 25k+ stars on GitHub. It also has an impressive 1700k+ weekly downloads.

Star React Virtualized ⭐️

16. React Google Analytics - React Google Analytics Module.

react google analytics

 

This is a JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase.

This module is mildly opinionated on how we instrument tracking within our front-end code. Our API is slightly more verbose than the core Google Analytics library to make the code easier to read.

Get started with the following npm command.

npm install react-ga --save
Enter fullscreen mode Exit fullscreen mode

This is how you can use it.

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');
ReactGA.pageview(window.location.pathname + window.location.search);


<!-- The core React library -->
<script src="https://unpkg.com/react@15.5.0/dist/react.min.js"></script>
<!-- The ReactDOM Library -->
<script src="https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js"></script>
<!-- ReactGA library -->
<script src="/path/to/bower_components/react-ga/dist/react-ga.min.js"></script>

<script>
  ReactGA.initialize('UA-000000-01', { debug: true });
</script>
Enter fullscreen mode Exit fullscreen mode

You can read the docs and see the demo after running npm install npm start and go to port 8000 on localhost.

It has 350k+ weekly downloads and has more than 5k stars on GitHub (archived).

Star React Google Analytics ⭐️

17. react-i18next - Internationalization for react done right.

react-i18next

 

There is no need to change your webpack configuration or add additional babel transpilers.

Get started with the following npm command.

npm i react-i18next
Enter fullscreen mode Exit fullscreen mode

Let's compare how the code structure looks.

before using react-i18next.

...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...
Enter fullscreen mode Exit fullscreen mode

after using react-i18next.

...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...
Enter fullscreen mode Exit fullscreen mode

You can read the docs and head over to interactive playground at Codesandbox.

This tool is used by over 182k+ developers and has more than 8k+ stars on GitHub. Its credibility is further solidified by an impressive download count of 3400k+ on the package, making it an excellent choice for your next React project.

You can also read a blog by Locize on React Localization - Internationalize with i18next.

Star react-i18next ⭐️

Whew! Such a long list of useful projects.

I know you have more ideas, share them, and let's build together :D

That is all for now!
Developer experience is crucial when taking on a new project which is why some projects have huge communities while others do not.

React communities are damn huge, so be part of those communities and take your project to the next level using these open source projects.

Have a great day! Till next time.

Follow me on GitHub.

Anmol-Baranwal (Anmol Baranwal) · GitHub

Top 5% GitHub 💜 Open Source Advocate & Maintainer 😄 Full-Stack Developer 🔖 Technical Writer (400k+ Reads) 🔥 Managing 5+ Communities 🚀 Open for Collab - Anmol-Baranwal

favicon github.com

Follow CopilotKit for more content like this.

copilotkit image

CopilotKit

Top comments (40)

Collapse
 
the_greatbonnie profile image
Bonnie •

This is a goldmine.

Thanks for sharing, Anmol

Collapse
 
uliyahoo profile image
uliyahoo •

Agreed!

Collapse
 
anmolbaranwal profile image
Anmol Baranwal •

Thanks Bonnie & Uli! Appreciate it :)

Collapse
 
valvonvorn profile image
val von vorn •

Itś a good and a bad thing that React needs so many additional libraries. Even 17 additional third party dependencies can be too much and 1 can be enough to introduce a single point of failure beyond your control.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal •

I think it's a matter of perspective not to reinvent the wheel unless you're building something ten times better with the same concept.

For instance, you must be aware of NextAuth, and even well-trusted packages have external dependencies. We are just part of one big ecosystem, and having external dependencies is a privilege as far as I believe.

next auth

You must be aware that even if a problem arises, developers would rush to help in solving that issue as soon as possible. It has happened countless times!

Collapse
 
fpaghar profile image
Fatemeh Paghar •

I recommend React Flowbite to developers looking to streamline their UI development process and deliver exceptional user experiences effortlessly.

React Flowbite seamlessly combines React's power with Flowbite CSS's sleek design elements, offering a range of reusable components for stunning interfaces. It's a time-saving solution for developers, allowing them to focus on functionality while effortlessly creating visually appealing web applications.

Collapse
 
jeremiah_the_dev_man profile image
Jeremiah •

Another Anmol banger :)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal •

Haha! Loved the word "banger" :D
Thanks!

Collapse
 
reactadmin profile image
react-admin • • Edited

Thank you for this insightful post! I wanted to add another fantastic open-source React framework to the mix: React-admin. With 24k+ stars on GitHub, React-admin is the go-to solution for building powerful single-page applications, whether it's ERPs, Admin panels, or B2B apps.

If you're looking to take your React projects to the next level, React-admin is definitely worth exploring!

Collapse
 
hosseinyazdi profile image
Hossein Yazdi •

This is from another world. I haven't seen any React library selections as comprehensive as this. Thanks for sharing.

For anyone who wants to explore further, here's also a helpful collection for React resources: webcurate.co/c/react

Collapse
 
andrewwebcoder profile image
Andrew-web-coder •

I recommend zustand for state management and Fancybox from Fancyapps for displaying media

Collapse
 
mdsiaofficial profile image
Md Shoriful Islam •

Thanks

Collapse
 
fernandezbaptiste profile image
Bap •

Excellent read Anmol! 👏

Collapse
 
anmolbaranwal profile image
Anmol Baranwal •

Thanks for reading Bap :)
I feel good that you found this good enough.

Collapse
 
dasheck0 profile image
Stefan Neidig •

Actually a really good list of tools. I am often sceptical of such compilations, but I really did enjoy this one. Thanks for sharing

View full discussion (40 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

abdulkadir_saloum_770fee4 profile image

"TypeScript vs JavaScript: Which One Should You Choose?"

Abdulkadir Saloum -

garciadiazjaime profile image

React: How Often Does a Cleanup Function Run?

Jaime -

yassinesallami profile image

How to create an image authentication system with python streamlit and canva!

Yassine Sallami -

mfyz profile image

Monitor everything with Healthchecks.io

Fatih Felix Yildiz -