DropInBlog React Router Integration

A lightweight React component that integrates DropInBlog into your React application using React Router (v6+).

Installation

npm install @dropinblog/reactrouter
# or
yarn add @dropinblog/reactrouter
# or
pnpm add @dropinblog/reactrouter

Usage

1. Import the component in your blog page:

import DibBlock from '@dropinblog/reactrouter';

2. Add the component to your blog page:

export default function BlogPage() {
  return (
    <div>
      <DibBlock
        blogUrl="/blog"
        blogId="your-dropinblog-id"
        fallback={<div>Loading...</div>}
      />
    </div>
  );
}

API Reference

DibBlock Props

Prop	Type	Required	Description
blogUrl	string	✅	The base URL path where your blog is mounted (e.g., /blog)
blogId	string	✅	Your DropInBlog ID from your DropInBlog dashboard
fallback	JSX	❌	Fallback component