DEV Community

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

Posted on • Edited on

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

#react #javascript #webdev #opensource

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 😎

Latest comments (53)

Collapse
 
syedmaazsaeed0001 profile image
Syed Maaz Saeed •

Great thanks πŸ‘πŸ»

Collapse
 
test_user_9933 profile image
test user •

great list of components that are really useful

Collapse
 
essijunior profile image
NDANG ESSI Pierre Junior •

Thanks for this article...

My fav here are Tolgee for translation and CopilotKit .

Collapse
 
pierre profile image
Pierre-Henry Soria ✨ •

I confirm, React Email is a really handy one. I've used it in the past πŸ˜ƒ

Collapse
 
yishai_zehavi profile image
Yishai Zehavi •

Excellent collection of components! Definitely gonna use some of them on my next side project. Thanks for sharing!

Collapse
 
eotobi profile image
Elisha Osotsi Otobi •

Impressive

Collapse
 
godfreymutebi profile image
Mutebi Godfrey •

amaizing

Collapse
 
lidouf profile image
lidouf •

nice work, buddy!

Collapse
 
samuel2935 profile image
Samuel •

Very helpful

Collapse
 
godthinking profile image
Khant Min Lwin •

I like that .It can have so benefits.

View full discussion (53 comments)