Ditto NextJS

A React component library for managing and rendering Ditto content in Next.js applications. This library provides a set of components and hooks to easily integrate Ditto content management into your Next.js projects.

Features

• 🚀 Full Next.js 15+ Support
• 💪 TypeScript Ready
• 🎨 Flexible Component System
• 🔄 Context-based State Management
• 📱 Rich Text Support
• 🌍 Internationalization Ready
• 🎯 Variable Interpolation
• 📦 Easy Integration

Installation

# Using pnpm (recommended)
pnpm add ditto-nextjs

# Using npm
npm install ditto-nextjs

# Using yarn
yarn add ditto-nextjs

Quick Start

1. Wrap your application with DittoProvider:

import { DittoProvider } from "ditto-nextjs";
import dittoData from "./ditto"; // Your Ditto content

function App({ children }) {
  return (
    <DittoProvider source={dittoData} variant="base">
      {children}
    </DittoProvider>
  );
}

2. Use Ditto components in your application:

import { DittoText, DittoComponent } from "ditto-nextjs";

function MyComponent() {
  return (
    <div>
      <DittoText textId="welcome_message" />
      <DittoComponent componentId="header" />
    </div>
  );
}

Components

DittoProvider

Root provider component that manages Ditto context and configuration.

interface DittoProviderProps {
  projectId?: string;
  variant?: string;
  source: DittoSource;
  children: React.ReactNode;
}

<DittoProvider projectId="my-project" variant="base" source={dittoData}>
  {children}
</DittoProvider>;

DittoComponent

Component for rendering Ditto content blocks.

interface DittoComponentLibraryProps {
  componentId: string;
  richText?: boolean;
  variables?: VariablesInput;
  count?: number;
  children?: (text: string) => React.ReactNode;
}

<DittoComponent
  componentId="header"
  variables={{ name: "John" }}
  richText={true}
/>;

DittoText

Component for rendering individual Ditto text elements.

interface DittoTextProps {
  projectId?: string;
  textId: string;
  variables?: VariablesInput;
  count?: number;
  richText?: boolean;
  children?: (text: string) => React.ReactNode;
}

<DittoText
  textId="welcome_message"
  variables={{ name: "John" }}
  richText={true}
/>;

DittoFrameOrBlock

Component for rendering either a Ditto frame or block.

interface DittoFrameOrBlockProps {
  projectId?: string;
  frameId: string;
  blockId?: string;
  variables?: VariablesInput;
  count?: number;
  filters?: {
    tags: string[];
  };
  children: (data: Frame | Block) => React.ReactNode;
}

<DittoFrameOrBlock
  frameId="main_content"
  blockId="header"
  variables={{ user: "John" }}
>
  {(data) => <div>{/* Render your content */}</div>}
</DittoFrameOrBlock>;

Hooks

useDitto

Hook for accessing Ditto context and core functionality.

const { data } = useDitto({
  projectId: "my-project",
  frameId: "main_frame",
  blockId: "content_block",
  variables: { user: "John" },
});

useDittoComponent

Hook for working with Ditto components programmatically.

const text = useDittoComponent({
  componentId: "header",
  variables: { name: "John" },
  richText: true,
});

useDittoSingleText

Hook for working with individual text elements.

const text = useDittoSingleText({
  projectId: "my-project",
  textId: "welcome_message",
  variables: { name: "John" },
  richText: true,
});

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build:lib

# Run lints
pnpm lint

Publishing

# Build and publish to npm
pnpm publish

License

MIT © Daniel Theo Santoso