@upbinger/blog-react

React component for embedding Upbinger blog content into your React application.

Installation

npm install @upbinger/blog-react react-router-dom
# or
yarn add @upbinger/blog-react react-router-dom

Quick Start

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { UpbingerBlog } from '@upbinger/blog-react';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Your other routes */}
        <Route path="/" element={<Home />} />
        
        {/* Blog routes - handles /blog, /blog/:slug, /blog/page-:page */}
        <Route path="/blog/*" element={<UpbingerBlog />} />
      </Routes>
    </BrowserRouter>
  );
}

Configuration

<UpbingerBlog
  // CDN base URL (default: https://cdn.upbinger.com)
  cdnBase="https://cdn.upbinger.com"
  
  // Base path for blog routes (default: /blog)
  basePath="/blog"
  
  // Enable debug logging
  debug={true}
  
  // Custom loading component
  loadingComponent={<MySpinner />}
  
  // Custom error component
  errorComponent={<MyError />}
  
  // Override domain (defaults to window.location.hostname)
  domain="example.com"
  
  // Additional CSS class
  className="my-blog-container"
/>

Using the Hook

For custom implementations, use the useBlogContent hook:

import { useBlogContent } from '@upbinger/blog-react';

function CustomBlogPost({ slug }) {
  const { loading, error, content, styles } = useBlogContent(slug);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: styles }} />
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </>
  );
}

// For listing pages, pass a page number
function CustomBlogListing({ page }) {
  const { loading, content } = useBlogContent(page); // page = 1, 2, 3...
  // ...
}

Adding Header and Footer

Wrap the UpbingerBlog component in a layout component to add your own header and footer:

import { UpbingerBlog } from '@upbinger/blog-react';

// Create a layout wrapper component
function BlogLayout() {
  return (
    <div className="blog-page">
      {/* Your Header */}
      <header className="bg-white shadow-sm">
        <nav className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <a href="/" className="text-xl font-bold">My Site</a>
          <div className="flex gap-6">
            <a href="/">Home</a>
            <a href="/blog">Blog</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
          </div>
        </nav>
      </header>

      {/* Blog Content */}
      <main className="max-w-6xl mx-auto px-4 py-8">
        <UpbingerBlog />
      </main>

      {/* Your Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="font-bold mb-4">My Site</h3>
              <p className="text-gray-400">Your site description here.</p>
            </div>
            <div>
              <h3 className="font-bold mb-4">Links</h3>
              <ul className="space-y-2 text-gray-400">
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Service</a></li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Contact</h3>
              <p className="text-gray-400">[email protected]</p>
            </div>
          </div>
          <p className="text-center text-gray-500 mt-8">
            © 2026 My Site. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}

// Use in your routes
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/blog/*" element={<BlogLayout />} />
      </Routes>
    </BrowserRouter>
  );
}

How It Works

1. The component fetches pre-built HTML from Upbinger's CDN
2. Content is loaded based on your domain (e.g., cdn.upbinger.com/blogs/yourdomain.com/)
3. Internal links are intercepted for SPA navigation
4. Styles from the blog are injected into the page

Routes Created

| Path | Description | |------|-------------| | /blog | Blog listing (page 1) | | /blog/page-2 | Blog listing (page 2, etc.) | | /blog/my-post-slug | Individual blog post |

Requirements

• React 17+ (hooks support)
• react-router-dom 6+
• Blogs published through Upbinger dashboard

License

MIT