uliyahoo

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

Star HeadlessUI ⭐️

Save these components to build as pro as a pilgrim.

Thanks everyone & Happy Holidays!

Top comments (1)

Ahmed R. J. Alsaedi • Nov 23 '23

these are very impressive thanks for sharing

DEV Community