@preprio/prepr-nextjs
Version:
Next.js package for Prepr CMS preview functionality with advanced debugging and visual editing capabilities
82 lines (76 loc) • 2.37 kB
text/typescript
import React, { ReactNode } from 'react';
interface PreprSegment {
readonly _id: string;
readonly name: string;
}
interface PreprToolbarOptions {
readonly debug?: boolean;
}
interface PreprToolbarProps {
readonly activeSegment: string | null;
readonly activeVariant: string | null;
readonly data: readonly PreprSegment[];
}
interface PreprToolbarProviderProps {
children: ReactNode;
props: PreprToolbarProps;
options?: PreprToolbarOptions;
}
declare const PreprToolbarProvider: React.FC<PreprToolbarProviderProps>;
declare const usePreprToolbar: () => {
isPreviewMode: boolean;
activeSegment: string;
activeVariant: string | null;
data: PreprSegment[];
emptySegment: PreprSegment;
segmentList: PreprSegment[];
selectedSegment: PreprSegment;
setSelectedSegment: (segment: PreprSegment) => void;
emptyVariant: string;
selectedVariant: string | null;
setSelectedVariant: (variant: string | null) => void;
editMode: boolean;
setEditMode: (mode: boolean) => void;
isIframe: boolean;
resetPersonalization: () => void;
resetAll: () => void;
};
declare function PreprToolbar(): React.JSX.Element;
interface PreprTrackingPixelProps {
/**
* The Prepr access token (without the full GraphQL URL)
* Extract this from your PREPR_GRAPHQL_URL: https://graphql.prepr.io/YOUR_ACCESS_TOKEN
*/
accessToken?: string;
}
/**
* PreprTrackingPixel component for user tracking
*
* This component loads the Prepr tracking script and initializes tracking.
* It should be included in your application to track user interactions.
*
* @param accessToken - Your Prepr access token
*
* @example
* ```tsx
* // In your layout or page
*
* import { PreprTrackingPixel } from '@preprio/prepr-nextjs/react'
*
* // Extract token from PREPR_GRAPHQL_URL
* const accessToken = extractAccessToken(process.env.PREPR_GRAPHQL_URL!)
*
* export default function Layout({ children }) {
* return (
* <html>
* <head>
* <PreprTrackingPixel accessToken={accessToken!} />
* </head>
* <body>{children}</body>
* </html>
* )
* }
* ```
*/
declare function PreprTrackingPixel({ accessToken, }: PreprTrackingPixelProps): React.JSX.Element | null;
export { PreprToolbar, PreprToolbarProvider, PreprTrackingPixel, usePreprToolbar };