DEV Community

Cover image for ✨ 8 components to become a React master πŸ§™β€β™‚οΈ πŸͺ„
Nevo David Subscriber for Gitroom

Posted on • Updated on

✨ 8 components to become a React master πŸ§™β€β™‚οΈ πŸͺ„

TL;DR

I have gathered React components you can use to build the ultimate website.

Each one of them has a unique use case!
Don't forget to star them 🌟
So let's do it!

Let's do it


1. Clickvote - Like, Upvote, And Review Any Context. πŸ‘‘

Clickvote

Seamlessly Integrate Like Upvote and Review Components into Your App.

Render likes boxes, review boxes, and reaction components using this simple React code!



import { ClickVoteProvider } from '@clickvote/react';
import { ClickVoteComponent } from '@clickvote/react';
import { LikeStyle } from '@clickvote/react';

<ClickVoteProvider>
    <ClickVoteComponent id={CONTEXT} voteTo={ID}>
        {(props) => <LikeStyle {...props} />}
    </ClickVoteComponent>
</ClickVoteProvider>


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/clickvote/clickvote


2. Novu - Add in-app notifications to your app!

Novu

Simple components and APIs for managing all communication channels in one place: Email, SMS, Direct, and Push

You can add in-app notifications to your app with this React component



import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
  IMessage,
} from "@novu/notification-center";

<NovuProvider
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
    <PopoverNotificationCenter colorScheme="dark">
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
     </PopoverNotificationCenter>
</NovuProvider>


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/novuhq/novu

Β 
Β 

3. CopilotKit - Add autocompletion to your text with GPT!

CopilotKit

A powerful & hackable copilot for any react app.
Get started in minutes & iterate ad infinitum.

A simple component that will auto-complete your content, just like you have on Gmail.



import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";

<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/RecursivelyAI/CopilotKit

Β 
Β 

4. Tolgee - Translate any context to any language!

Tolgee

Smart platform, Fast integration, Painless localization.

A simple component that will translate any context to any language!



import { TolgeeProvider, T } from "@tolgee/react";

<TolgeeProvider
  tolgee={tolgee}
  fallback="Loading..." // loading fallback
>
  <T keyName="translate_me">Translate me!</T>
</TolgeeProvider>


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/tolgee/tolgee-platform

Β 
Β 

5. Hanko - Passkey authentication to your app!

Hanko

Beautiful, customizable components, SDKs, and APIs to power your login and user management.

Add passkey authentication in 5 minutes! Here is the component:



import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.HANKO_API_URL;

register(hankoApi);

<hanko-auth />;


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/teamhanko/hanko

Β 
Β 

6. React Email - The next generation of writing emails

React Email

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

A component to help you design and send emails!



import { Button } from '@react-email/button';
import { Html } from '@react-email/html';

<Html lang="en" dir="ltr">
    <Button href="https://example.com">
        Click me
    </Button>
</Html>


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/resendlabs/react-email

Β 
Β 

7. React Flow - The best way to create draggable workflows!

React Flow

A highly customizable React component for building node-based editors and interactive diagrams

A simple component that will render drag and drop nodes for workflows.



import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

<ReactFlow
    nodes={nodes}
    edges={edges}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
>
    <MiniMap />
    <Controls />
    <Background />
</ReactFlow>


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/wbkd/react-flow

Β 
Β 

8. Novel - The best WYSIWYG editor!

React Flow

Notion-style WYSIWYG editor with AI-powered autocompletion.

A simple component that will render a notion style editor with tons of features!



import { Editor } from "novel";

<Editor />


Enter fullscreen mode Exit fullscreen mode

Star it here 🌟
https://github.com/steven-tey/novel

Β 
Β 


Thank you all!
See you next week 😎

Top comments (50)

Collapse
 
garrrikkotua profile image
Igor Kotua

Amazing work, Nevo!

How about a tutorial using all these tools? πŸ€—

Collapse
 
nevodavid profile image
Nevo David

Great idea!
Thank you for the kind words!

Collapse
 
godfreymutebi profile image
Mutebi Godfrey

k

Collapse
 
t_bogard profile image
Erick Rodriguez • Edited

And I thought I would read something about component references, State management and store practices. You're simply showcasing components without going any further on what is beneficial for you to use it as developer.

Using those components won't make me a master on React. Understanding how React works internally would indeed make me a master of it.

Collapse
 
pvamshi profile image
Vamshi Krishna

Exactly !!
I was surprised too and was searching for someone who said this

Collapse
 
dsaga profile image
Dusan Petkovic

I've been hearing a lot about the react email library, have to try on a project..

Thanks for the comprehensive list!

Collapse
 
nevodavid profile image
Nevo David • Edited

Resend labs is doing an amazing work with everything connected to emails!

Collapse
 
buichuongvnua profile image
buichuongvnua

good

Collapse
 
nevodavid profile image
Nevo David

Thank you so much πŸ”₯

Collapse
 
shreya_gr profile image
Shreya

well structure article Nevo. Looks great.

Collapse
 
nevodavid profile image
Nevo David

Thank you so much Shreya!

Collapse
 
marcitpro profile image
Marcitpro

React is great

Collapse
 
nevodavid profile image
Nevo David

It really is!

Collapse
 
godfreymutebi profile image
Mutebi Godfrey

true

Collapse
 
elhaddajiotmane profile image
ELHADADJI otmane

Thanks __

Collapse
 
nevodavid profile image
Nevo David

πŸš€

Collapse
 
jerommiole profile image
jrom

This is awesome!

Collapse
 
sahufdev profile image
Sahuf

Im learning react right now this will help alot thanks

Collapse
 
nevodavid profile image
Nevo David

Thank you for reading 😎

Collapse
 
srbhr profile image
Saurabh Rai

Amazing list, I liked the concept of Clickvote and the ability to add in the option to vote anywhere in general. Also, the WYSIWYG editor, Novel is also amazing!

Thanks for making this list, awesome work.