Vibe Kanban Web Companion

This package adds point-and-click edit functionality to web apps, when used with Vibe Kanban.

Works with frameworks like Next.js, Create React App, & Vite that use @babel/plugin-transform-react-jsx-source

Installation

Even though vibe-kanban-web-companion is added to dependencies, tree-shaking will remove vibe-kanban-web-companion from production builds.

Add this dependency to your project:

npm i vibe-kanban-web-companion

Usage

Create React App

+import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <VibeKanbanWebCompanion />
     <App />
   </React.StrictMode>
 );

Next.js

+import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'
 import type { AppProps } from 'next/app'
 import '../styles/globals.css'

 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
+      <VibeKanbanWebCompanion />
       <Component {...pageProps} />
     </>
   )

Vite

+import { VibeKanbanWebCompanion } from "vibe-kanban-web-companion";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <VibeKanbanWebCompanion />
  </React.StrictMode>
);

Credits

Thanks to Eric Clemmons for creating the original Click-To-Component library, from which our helper is forked from.