簡介

我收集了最好的 React 元件，您可以使用它來建立強大的 Web 應用程式。

每個都有自己的味道。

別忘了表達你的支持🌟

現在，讓我們仔細閱讀這段程式碼！ 🍽️

1. CopilotPortal：將可操作的 GPT 聊天機器人嵌入您的網路應用程式中。

將 GPT 支援的聊天機器人插入您的 React 應用程式中。

可以將 RAG 與雲端和應用程式狀態即時整合。

需要幾行程式碼才能嵌入。

import "@copilotkit/react-ui/styles.css";
import { CopilotProvider } from "@copilotkit/react-core";
import { CopilotSidebarUIProvider } from "@copilotkit/react-ui";

export default function App(): JSX.Element {
  return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat">
      <CopilotSidebarUIProvider>

        <YourContent />

      </CopilotSidebarUIProvider>
    </CopilotProvider>
  );
}

https://github.com/RecursivelyAI/CopilotKit

2. ClickVote - 按讚、投票並查看任何上下文

輕鬆將點讚、按讚和評論加入到您的網路應用程式中。

用於加入這些元件的簡單反應程式碼。

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

3. 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/xyflow/xyflow

4. CopilotTextarea - React 應用程式中的 AI 驅動寫作

具有 Github CopilotX 功能的任何 React <textarea> 的直接替代品。

自動完成、插入、編輯。

可以即時或由開發人員提前提供任何上下文。

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


// Provide context...
useMakeCopilotReadable(...)

// in your component...
<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>`

https://github.com/RecursivelyAI/CopilotKit

5. Novu - 將應用程式內通知新增至您的應用程式！

用於在一個地方管理所有通訊管道的簡單元件和 API：電子郵件、SMS、Direct 和 Push

您可以使用此 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

6. ReactIcons - 最受歡迎的反應圖示集合

輕鬆將 Font Awesome、Material Design 等中的流行圖標加入到您的 React 應用程式中。

為開發人員提供簡單、廣泛的選擇。

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

https://github.com/react-icons/react-icons

7. React-dropzone - 新增 HTML5 拖放 UI。

用於實作 HTML5 拖放區域的簡單 React 鉤子，重點放在檔案互動。

它提供了一個易於使用的介面，用於向 React 應用程式加入檔案拖放功能。

import React from 'react';
import {useDropzone} from 'react-dropzone';

const Basic = (props)=>{
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

export default Basic;

https://github.com/react-dropzone/react-dropzone

8. React ChartJS 2 - 建立和整合各種圖表。

用於在 React 應用程式中繪製圖表的即插即用解決方案，類似於 Chart.js 功能。

啟用動態、互動式圖表。

適用於即時資料或預定義資料集。

import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',

      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',

      ],
      borderWidth: 1,
    },
  ],
};

export default function ShowChart() {
  return <Doughnut data={data} />;
}

https://github.com/reactchartjs/react-chartjs-2

9. Redux - 可預測的狀態容器庫

JavaScript 應用程式中 Redux 的無縫補充，提供可靠的狀態管理。

確保一致的應用程式行為。

便於輕鬆除錯和測試。

與各種庫整合。

https://github.com/reduxjs/redux

10. Blueprint - Palantir 的密集 UI 庫

提供一組用於建立複雜且資料豐富的介面的元件和樣式。

設計和開發具有現代外觀和感覺的類似桌面的 Web 應用程式。

由 Palantir 開發

import React from 'react';
import '@blueprintjs/core/lib/css/blueprint.css';
import { H3, H4, OL, Pre } from "@blueprintjs/core";

function App() {
  return (
    <div style={{ display: 'block', width: 500, padding: 30 }}>
      <h4>ReactJS Blueprint HTML Elements Component</h4>
      Heading Component:
      <H4>H4 Size Heading</H4>
      <H3>H3 Size Heading</H3>
      <br></br>
      OrderList Component:
      <OL>
        <li>1st item</li>
        <li>2nd item</li>
      </OL>
      Pre Component:
      <Pre>Sample Pre</Pre>
    </div>
  );
}

https://github.com/palantir/blueprint

11. Headless UI - 可存取的 Tailwind 整合 UI 元件。

在 React 和 Vue 應用程式中建立可存取的 UI 元件。

適用於即時資料或預定義資料集，使其成為現代 Web 開發專案的寶貴補充

import React, { useState } from 'react';
import { Dialog } from '@headlessui/react';

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50">
      {/* The backdrop, rendered as a fixed sibling to the panel container */}
      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
      {/* Full-screen container to center the panel */}
      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
        {/* Your dialog content goes here */}
      </div>
    </Dialog>
  );
}

https://github.com/tailwindlabs/headlessui

保存這些元件，以便像朝聖者一樣專業地建造。

謝謝大家，節日快樂！

原文出處：https://dev.to/copilotkit/reacts-giving-11-react-components-for-aspiring-pros-eck