Skip to main content

Function: Narration()

Narration(props): ReactElement

The Narration component is responsible for rendering a narration section with various interactive elements. It displays a title, optional sparkle link, and action buttons for regenerating narration and providing feedback.

The actual content of the Narration should be provided as a child element. See the intro docs for more information on how to generate Narration content and examples of how to retrieve it for display.

Simple usage:

const NarrationPage = () => {
  return (
    <Narration id="narration-id" title="Narration Title">
      <p>This is the content of the narration.</p>
    </Narration>
  );
}

With sparkle link and actions:

const NarrationPage = () => {
  return (
    <Narration
      id="narration-id"
      title="Narration Title"
      sparkleLink="https://example.com"
      sparkleText="Learn more"
      showActions={true}
    >
        <p>This is the content of the narration.</p>
    </Narration>
  );
}

Parameters​

• props: PropsWithChildren<NarrationProps>

Returns​

ReactElement

Defined in​

Narration.tsx:86