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>
);
}
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>
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>
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>`
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>
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>
);
}
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;
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} />;
}
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.
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>
);
}
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>
);
}
Save these components to build as pro as a pilgrim.
Thanks everyone & Happy Holidays!
Top comments (1)
these are very impressive thanks for sharing