Perseus
    Preparing search index...

    Function ContentPreview

    • The ContentPreview component provides a simple preview system for Perseus Content. Due to how Persus styles are built, the preview styling matches the current device based on the viewport width (using @media queries for min-width and max-width).

      The preview will render the mobile variant (styling and layout) when the previewDevice is phone or tablet. Note that the styling cannot be matched 100% due to the above @media query limitation.

      Parameters

      • __namedParameters: {
            apiOptions?: Readonly<
                {
                    answerableCallback?: (arg1: boolean) => unknown;
                    baseElements?: { Link: ComponentType<any> };
                    canScrollPage?: boolean;
                    customKeypad?: boolean;
                    editingDisabled?: boolean;
                    editorChangeDelay?: number;
                    flags?: Record<
                        | "new-radio-widget"
                        | "image-widget-upgrade-gif-controls"
                        | "image-widget-upgrade-scale"
                        | "interactive-graph-absolute-value"
                        | "interactive-graph-tangent"
                        | "interactive-graph-logarithm"
                        | "interactive-graph-exponent"
                        | "interactive-graph-vector",
                        boolean,
                    >;
                    getAnotherHint?: () => unknown;
                    hintProgressColor?: string;
                    imagePlaceholder?: ReactNode;
                    imagePreloader?: (dimensions: Dimensions) => ReactNode;
                    interactionCallback?: (widgetData: { [widgetId: string]: any }) => void;
                    isArticle?: boolean;
                    isMobile?: boolean;
                    isMobileApp?: boolean;
                    nativeKeypadProxy?: (blur: () => void) => KeypadAPI;
                    onFocusChange?: (
                        newFocusPath: FocusPath,
                        oldFocusPath: FocusPath,
                        keypadHeight?: number,
                        focusedElement?: HTMLElement,
                    ) => unknown;
                    readOnly?: boolean;
                    setDrawingAreaAvailable?: (arg1: boolean) => unknown;
                    showAlignmentOptions?: boolean;
                    trackInteraction?: (args: TrackInteractionArgs) => void;
                    widgetPlaceholder?: ReactNode;
                },
            >;
            legacyPerseusLint?: readonly string[];
            linterContext?: LinterContextProps;
            previewDevice: DeviceType;
            question?: PerseusRenderer;
            reviewMode?: boolean;
            seamless?: boolean;
        }
        • OptionalapiOptions?: Readonly<
              {
                  answerableCallback?: (arg1: boolean) => unknown;
                  baseElements?: { Link: ComponentType<any> };
                  canScrollPage?: boolean;
                  customKeypad?: boolean;
                  editingDisabled?: boolean;
                  editorChangeDelay?: number;
                  flags?: Record<
                      | "new-radio-widget"
                      | "image-widget-upgrade-gif-controls"
                      | "image-widget-upgrade-scale"
                      | "interactive-graph-absolute-value"
                      | "interactive-graph-tangent"
                      | "interactive-graph-logarithm"
                      | "interactive-graph-exponent"
                      | "interactive-graph-vector",
                      boolean,
                  >;
                  getAnotherHint?: () => unknown;
                  hintProgressColor?: string;
                  imagePlaceholder?: ReactNode;
                  imagePreloader?: (dimensions: Dimensions) => ReactNode;
                  interactionCallback?: (widgetData: { [widgetId: string]: any }) => void;
                  isArticle?: boolean;
                  isMobile?: boolean;
                  isMobileApp?: boolean;
                  nativeKeypadProxy?: (blur: () => void) => KeypadAPI;
                  onFocusChange?: (
                      newFocusPath: FocusPath,
                      oldFocusPath: FocusPath,
                      keypadHeight?: number,
                      focusedElement?: HTMLElement,
                  ) => unknown;
                  readOnly?: boolean;
                  setDrawingAreaAvailable?: (arg1: boolean) => unknown;
                  showAlignmentOptions?: boolean;
                  trackInteraction?: (args: TrackInteractionArgs) => void;
                  widgetPlaceholder?: ReactNode;
              },
          >

          API Options to use when previewing.

        • OptionallegacyPerseusLint?: readonly string[]
        • OptionallinterContext?: LinterContextProps
        • previewDevice: DeviceType

          The type of device to simulate the preview for. Note that this preview may not be 100% accurate with regards to styling (due to styles that use media queries based on the screen width).

        • Optionalquestion?: PerseusRenderer

          The Perseus question to preview.

        • OptionalreviewMode?: boolean

          Whether the preview is in review mode. When true, widgets will show correct answers with explanations and prevent interaction.

        • Optionalseamless?: boolean

          When true, renders a seamless preview without any extra spacing. When false, renders a gutter where linting issues are displayed.

      Returns Element

    Settings

    Member Visibility