for CopilotKit

Posted on Nov 21, 2023 • Edited on Nov 26, 2023

✨11 React Components to Become a Pro 🦃🍁 🥧

#webdev #javascript #react #opensource

TL;DR

"Reactsgiving" is upon us 👨‍🌾

I have harvested the finest React components you can use to build a powerful web app.

Each has its own flavor.
Don't forget to show your support 🌟

Now, let's gobble up this code! 🍽️

1. CopilotPortal: Embed an Actionable GPT-Chatbot Into Your web-app.

Insert a GPT-powered chatbot into your react app.

Can integrate and RAG with cloud & app state in realtime.

Takes a few lines of code to embed.

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> ); }

Star CopilotPortal⭐️

2. ClickVote - Like, Upvote, And Review Any Context

Easily Add Upvotes, Likes and Reviews into Your Web-App.

Simple react code for adding these components.

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>

Star ClickVote ⭐️

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

A React component tailor-made for constructing node-based editors and interactive diagrams.

Highly customizable, it offers drag-and-drop capabilities for efficient workflow creation.

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>

Star React Flow ⭐️

4. CopilotTextarea - AI-powered Writing in React Apps

A drop-in replacement for any react <textarea> with the features of Github CopilotX.

Autocompletes, insertions, edits.

Can be fed any context in real time or by the developer ahead of time.

import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; // Provide context... useMakeCopilotReadable(...) // in your component... <CopilotProvider> <CopilotTextarea/> </CopilotProvider>`

Star CopilotTextarea ⭐️

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

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>

Star Novu ⭐️

6. ReactIcons - Collection of the most Popular react Icons

Easily add popular icons from Font Awesome, Material Design, and more to your React app.

A simple, vast selection for developers.

import { FaBeer } from "react-icons/fa"; function Question() { return ( <h3> Lets go for a <FaBeer />? </h3> ); }

Star ReactIcons ⭐️

7. React-dropzone - add HTML5 drag & drop UI.

Straightforward React hook for implementing an HTML5 drag-and-drop zone, focusing on file interactions.

It provides an easy-to-use interface for adding file drag-and-drop capabilities to React applications.

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;

Star ReactDropzone ⭐️

8. React ChartJS 2 - Create and integrate diverse charts.

A plug-and-play solution for charting within React applications, akin to Chart.js capabilities.

Enables dynamic, interactive charting.

Adaptable to real-time data or predefined datasets.

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} />; }

Star ReactChart ⭐️

9. Redux - predictable state container library

A seamless addition to Redux in JavaScript applications, providing reliable state management.

Ensures consistent app behavior.

Facilitates easy debugging and testing.

Integrates with various libraries.

Star ReactRedux ⭐️

10. Blueprint - dense UI library by Palantir

Provides a set of components and styles for creating complex and data-rich interfaces.

design and develop desktop-like web applications with a modern look and feel.

Developed by 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> ); }

Star BluePrint ⭐️

11. Headless UI - Accessible Tailwind-integrated UI components.

Create accessible UI components in React and Vue application.

Adaptable to real-time data or predefined datasets, making it a valuable addition to modern web development projects

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> ); }