UNPKG

add-inbox

Version:

Add inbox notifications to your application with one command

71 lines (52 loc) 1.73 kB
# Add Inbox A CLI command to easily add Novu's notification inbox component to your React or Next.js project. ## Installation & Usage You can use this tool without installing it by running: ```bash npx add-inbox@latest ``` This will guide you through an interactive process to add the Novu Inbox component to your project. ## Features - ✅ Interactive CLI prompts for selecting framework and TypeScript options - ✅ Support for React and Next.js - ✅ Support for Tailwind CSS styling - ✅ Automatic dependency installation - ✅ Component creation in your project's component directory - ✅ Environment variable setup for Novu configuration - ✅ Custom backend and socket URL configuration - ✅ Region-based configuration (US/EU) ## Example Usage in Your App ```jsx import NovuInbox from '@/components/ui/inbox/NovuInbox'; // Inside your component return ( <div> <header className="flex justify-between items-center"> <h1>My App</h1> <NovuInbox /> </header> </div> ); ``` ## Configuration Make sure to set up your Novu application ID: For React: ``` NOVU_APP_ID=your_app_id_here ``` For Next.js: ``` NEXT_PUBLIC_NOVU_APP_ID=your_novu_app_id_here ``` ## Custom Backend Configuration When using custom backend and socket URLs, the generated component will include the appropriate props: ```jsx <Inbox applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID} subscriberId={subscriberId} backendUrl="https://api.my-novu-instance.com" socketUrl="wss://ws.my-novu-instance.com" // ... other props /> ``` If no custom URLs are provided, the component will use Novu's default URLs or region-specific URLs (EU region uses `https://eu.api.novu.co` and `wss://eu.ws.novu.co`).