✨ 成为 React 大师的 8 个组件🧙‍♂️🪄

TL;DR

我收集了可用于构建终极网站的 React 组件。

每个都有独特的用例！
别忘了给它们点赞哦🌟
，快来试试吧！

1. Clickvote - 点赞、投票并评论任何内容。👑

将点赞和评论组件无缝集成到您的应用程序中。

使用这个简单的 React 代码渲染喜欢框、评论框和反应组件！



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>

在这里加星标 🌟
https://github.com/clickvote/clickvote

2. Novu——为您的应用添加应用内通知！

简单的组件和 API，用于在一个地方管理所有通信渠道：电子邮件、短信、直接和推送

您可以使用此 React 组件向您的应用添加应用内通知



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>

在这里加星标 🌟
https://github.com/novuhq/novu

3. CopilotKit——使用 GPT 为您的文本添加自动完成功能！

适用于任何 React 应用的强大且可定制的副驾驶。
几分钟内即可上手，并可无限迭代。

一个简单的组件，可以自动完成您的内容，就像在 Gmail 上一样。



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

<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>

在这里加星标 🌟
https://github.com/RecursivelyAI/CopilotKit

4. Tolgee——将任何上下文翻译成任何语言！

智能平台，快速集成，轻松本地化。

一个简单的组件，可以将任何上下文翻译成任何语言！



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

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

在这里加星标🌟
https://github.com/tolgee/tolgee-platform

5. Hanko——对您的应用程序进行密码验证！

美观、可定制的组件、SDK 和 API 为您的登录和用户管理提供支持。

5分钟内添加密钥认证！组件如下：



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

const hankoApi = process.env.HANKO_API_URL;

register(hankoApi);

<hanko-auth />;

在这里加星标🌟
https://github.com/teamhanko/hanko

6. React Email——下一代电子邮件写作工具

一组高质量、无样式的组件，用于使用 React 和 TypeScript 创建漂亮的电子邮件。

一个帮助您设计和发送电子邮件的组件！



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>

在这里加星标🌟
https://github.com/resendlabs/react-email

7. React Flow——创建可拖拽工作流程的最佳方式！

高度可定制的 React 组件，用于构建基于节点的编辑器和交互式图表

一个简单的组件，可以为工作流呈现拖放节点。



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>

在这里加星标🌟
https://github.com/wbkd/react-flow

8.小说——最好的所见即所得编辑器！

Notion 风格的所见即所得编辑器，具有 AI 驱动的自动完成功能。

一个简单的组件，它将呈现一个具有大量功能的概念样式编辑器！



import { Editor } from "novel";

<Editor />

在这里加星标🌟
https://github.com/steven-tey/novel

谢谢大家！
下周见😎

文章来源：https://dev.to/github20k/8-components-to-become-a-react-master-2ee4