DEV Community
48
416
Cover image for 17 Must-know React Projects for Developers 👩💻 🔥
Tolgee profile imageAnmol Baranwal
Anmol Baranwal Subscriber for Tolgee
Posted on Oct 16
227
38
45
45
59
17 Must-know React Projects for Developers 👩💻 🔥
react
javascript
programming
opensource
The react ecosystem is huge, thanks to the developer community.
Thousands of packages, libraries and frameworks make it so powerful.
Today, we are exploring 17 cool React projects that will be very useful for developers. I've also covered three awesome UI component libraries.
Let's jump in.
- Tolgee - web-based localization platform. tolgee
Tolgee is an open source alternative to Crowdin, Phrase and Lokalise.
You can manage translations by using tolgee for translating texts, editing them in real-time and synchronizing them with your app.
Imagine you have a button in your app that says Submit. Instead of manually creating translations for Submit in different languages (like "Enviar" for Spanish), you add Tolgee to your app.
Instead of manually editing the large JSONs with lot of localization data, you can alt+click the button directly in your app and change its translation on the spot, without digging through code.
tolgee react
Get started with Tolgee React SDK by using this command.
npm i @tolgee/react
This is how you can use this.
// wrap your code with the tolgee provider
import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";
const tolgee = Tolgee()
.use(DevTools())
.use(FormatSimple())
.init({
language: 'en',
apiUrl: process.env.VITE_APP_TOLGEE_API_URL,
apiKey: process.env.VITE_APP_TOLGEE_API_KEY,
});
...
<TolgeeProvider
tolgee={tolgee}
fallback="Loading..." // loading fallback
// Use the T component to translate your texts
import { T } from "@tolgee/react";
export const Component = () => {
return (
Translate me!
)
}
Check this sample app using Tolgee React SDK.
You can read the docs about react integration. It supports all the other frameworks like Angular, Vue, Svelte, Vanilla JS and Nextjs.
There are lots of features like:
-→ In-context Translation : translate them directly in the app with the Tolgee i18n tool.
-→ One-click screenshots : Click once to take a screenshot from your app with highlighted phrases to translate.
tolgee features
Tolgee has 1.7k stars on GitHub and growing strong.
Star Tolgee ⭐️
- Mantine Hooks - react hooks for state and UI management. mantine hooks
How many times have you been stuck in writing hooks from scratch?
Well, I'm never going to do it from now on thanks to mantine hooks!
It's not efficient to write more code since you would end up maintaining it later so it's better to use these production-level hooks to make your work a lot easier.
Trust me, getting 60+ hooks is a big deal considering they have a simple way for you to see the demo of each of the hooks with easy docs to follow.
Get started with the following npm command.
npm install @mantine/hooks
This is how you can use useScrollIntoView as part of mantine hooks.
import { useScrollIntoView } from '@mantine/hooks';
import { Button, Text, Group, Box } from '@mantine/core';
function Demo() {
const { scrollIntoView, targetRef } = useScrollIntoView({
offset: 60,
});
return (
onClick={() =>
scrollIntoView({
alignment: 'center',
})
}
>
Scroll to target
style={{
width: '100%',
height: '50vh',
backgroundColor: 'var(--mantine-color-blue-light)',
}}
/>
Hello there
);
}
They almost have everything from local storage to pagination, to scroll view, intersection, and even some very cool utilities like eye dropper and text selection. This is damn too helpful!
eye dropper
You can read the docs.
They have more than 26.4k+ stars on GitHub. It's not only for the hooks because Mantine is a component library for React.
Star Mantine Hooks ⭐️
- Aceternity UI - copy paste components for your website. acernity ui
After Shadcn was appreciated in the developer community, we saw a surge of new component-based libraries. To be honest, we don't need 100 new libraries, but some definitely stood out.
Aceternity UI is one of them where you can copy paste the most trending components and use them in your websites without having to worry about styling and animations.
You can explore all the components.
I will discuss the top 4 that I really loved. These are animated but you can get the idea based on how they look.
✅ Floating dock: Useful as navigation, it does a clean animation when I hover over any icon.
floating dock component
✅ Lamp Section Header: Useful for separating sections and has a smooth transition of expanding based on scroll.
lamp effect
✅ GitHub Globe: The globe can be dragged. This was originally used on the GitHub website if you are curious.
github globe
✅ Animated Tooltip: Useful for showcasing authority and trust. You can use it to show people or organizations you work with.
animated tooltip
hovered over the second avatar
You will find code, installation instructions, a CLI guide and even the description of props that are used within the code.
props
One thing I really loved is that a lot of components are keeping things simple, no fancy over-kill type stuff. You can read the docs.
This is the only project on the list that is not open source but definitely worth checking out.
Visit Aceternity UI 🔥
- 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 mono repo 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
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 are 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 (
);
}
export default Flow;
This is how it looks. You can also add a label, change the type and make it interactive.
hello world
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. You can simply use the Background component in React Flow to implement that pattern.
import { Background } from 'reactflow';
// this will be under React Flow component. Just an example.
Top comments (0)