> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GuideContent

> GuideContent React and JS widgets used to display Algolia's Guides.

## React

The `GuideContent` widget lets you render the content of a guide on your website.

### Installation

The Algolia Guides React package is available on the [npm](https://www.npmjs.com/package/@algolia/generative-experiences-react) registry.

<CodeGroup>
  ```sh npm theme={"system"}
  npm install @algolia/generative-experiences-react
  ```

  ```sh yarn theme={"system"}
  yarn add @algolia/generative-experiences-react
  ```
</CodeGroup>

### Usage

```jsx React icon=code theme={"system"}
import { createClient } from "@algolia/generative-experiences-api-client";
import { GuideContent } from "@algolia/generative-experiences-react";

const client = createClient({
  appId: "ALGOLIA_APPLICATION_ID",
  indexName: "INDEX_NAME",
  searchOnlyAPIKey: "ALGOLIA_API_KEY",
  region: "us",
});

function App({ userToken, currentObjectID }) {
  //...

  return (
    <GuideContent
      client={client}
      showFeedback
      userToken={userToken}
      objectID={currentObjectID}
      itemComponent={({ hit }) => <HitComponent hit={hit} />}
    />
  );
}
```

### Parameters

<ParamField body="client" type="GSEClient" required>
  The initialized Algolia Generative Experiences client.
</ParamField>

<ParamField body="objectID" type="string" required>
  The ID of the guide to be retrieved.
</ParamField>

<ParamField body="itemComponent" type="({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]" required>
  Component to display the items featured in the guide.
</ParamField>

<ParamField body="onlyPublished" type="boolean" default={true}>
  Whether to only return headlines with generated content.
</ParamField>

<ParamField body="showImmediate" type="boolean" default={true}>
  Whether to generate and display the headlines on load.
</ParamField>

<ParamField body="featuredItemsTitle" type="string">
  The title of the related items carousel found at the end of a guide.
  Default: `Items featured in this article`
</ParamField>

<ParamField body="maxFeaturedItems" type="string" default="4">
  The number of featured items displayed at the end of a guide.
</ParamField>

<ParamField body="showFeedback" type="boolean" default={false}>
  Whether to show the feedback widget.
  If true, you also need to provide a `userToken`.
</ParamField>

<ParamField body="userToken" type="string">
  The user token needed for computing feedback.
  Required if `showFeedback` is `true`.
</ParamField>

<ParamField body="children" type="(props: ChildrenProps) => JSX.Element">
  A render function to fully customize what's displayed.

  The default implementation is:

  ```jsx React icon=code theme={"system"}
  function defaultRender(props) {
    return (
      <section
        className={cx("ais-GuidesContent-wrapper", props.classNames?.wrapper)}
      >
        <props.View />
      </section>
    );
  }
  ```
</ParamField>

<ParamField body="view" type="ViewProps">
  The view component into which your guide content will be rendered.
</ParamField>

<ParamField body="classNames" type="ContentClassNames">
  The class names for the component.

  ```ts TypeScript icon=code theme={"system"}
  type ContentClassNames = Partial<{
    wrapper?: string;
    container?: string;
    errorContainer?: string;
    errorContainerTitle?: string;
    contentSection?: string;
    productLink?: string;
    heroImage?: string;
    introSection?: string;
    articleContentSection?: string;
    factorsSection?: string;
    factorsList?: string;
    factorItem?: string;
    productSection?: string;
    productFactorsList?: string;
    relatedItemsSection?: string;
    relatedItemsListContainer?: string;
    relatedItemsTitle?: string;
    relatedItemsList?: string;
    item?: string;
  }>;
  ```
</ParamField>

## JavaScript

The `guideContent` widget lets you reference and render different guides on your website.

### Installation

The Algolia Guides JavaScript package is available on the [npm](https://www.npmjs.com/package/@algolia/generative-experiences-js) registry.

<CodeGroup>
  ```sh npm theme={"system"}
  npm install @algolia/generative-experiences-js
  ```

  ```sh yarn theme={"system"}
  yarn add @algolia/generative-experiences-js
  ```
</CodeGroup>

### Usage

```jsx JavaScript icon=code theme={"system"}
import { createClient } from "@algolia/generative-experiences-api-client";
import { guideContent } from "@algolia/generative-experiences-js";

const client = createClient({
  appId: "ALGOLIA_APPLICATION_ID",
  indexName: "INDEX_NAME",
  searchOnlyAPIKey: "ALGOLIA_API_KEY",
  region: "us",
});

guideContent({
  container: "#content",
  client: client,
  userToken: "test-user",
  showFeedback: true,
  itemComponent({ hit }) {
    return <div>{hit.title}</div>;
  },
  objectID: objectID,
});
```

### Parameters

<ParamField body="client" type="GSEClient" required>
  The initialized Algolia Generative Experiences client.
</ParamField>

<ParamField body="objectID" type="string" required>
  The ID for the guide to be retrieved.
</ParamField>

<ParamField body="itemComponent" type="({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]" required>
  Component to display the items featured in the guide.
</ParamField>

<ParamField body="onlyPublished" type="boolean" default={true}>
  Whether to only return headlines with generated content.
</ParamField>

<ParamField body="showImmediate" type="boolean" default={true}>
  Whether to generate and display the headlines on load.
</ParamField>

<ParamField body="featuredItemsTitle" type="string">
  The title of the related items carousel found at the end of a guide.
  Default: `Items featured in this article`
</ParamField>

<ParamField body="maxFeaturedItems" type="string" default="4">
  The number of featured items displayed at the end of a guide.
</ParamField>

<ParamField body="showFeedback" type="boolean" default={false}>
  Whether to show the feedback widget.
  If true, you also need to provide a `userToken`.
</ParamField>

<ParamField body="userToken" type="string">
  The user token needed for computing feedback.
  Required if `showFeedback` is `true`
</ParamField>

<ParamField body="children" type="(props: ChildrenProps) => JSX.Element">
  A render function to fully customize what's displayed.

  The default implementation is:

  ```jsx JavaScript icon=code theme={"system"}
  function defaultRender(props) {
    return (
      <section
        className={cx("ais-GuidesContent-wrapper", props.classNames?.wrapper)}
      >
        <props.View />
      </section>
    );
  }
  ```
</ParamField>

<ParamField body="view" type="ViewProps">
  The view component into which your guide content will be rendered.
</ParamField>

<ParamField body="classNames" type="ContentClassNames">
  The Class names for the component.

  ```ts TypeScript icon=code theme={"system"}
  type ContentClassNames = Partial<{
    wrapper?: string;
    container?: string;
    errorContainer?: string;
    errorContainerTitle?: string;
    contentSection?: string;
    productLink?: string;
    heroImage?: string;
    introSection?: string;
    articleContentSection?: string;
    factorsSection?: string;
    factorsList?: string;
    factorItem?: string;
    productSection?: string;
    productFactorsList?: string;
    relatedItemsSection?: string;
    relatedItemsListContainer?: string;
    relatedItemsTitle?: string;
    relatedItemsList?: string;
    item?: string;
  }>;
  ```
</ParamField>