GuidesHeadlines

React

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

Installation

The Algolia Guides React package is available on the npm registry.

npm install @algolia/generative-experiences-react

yarn add @algolia/generative-experiences-react

Usage

React

import { createClient } from "@algolia/generative-experiences-api-client";
import { GuidesHeadlines } from "@algolia/generative-experiences-react";

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

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

  return (
    <GuidesHeadlines
      showFeedback
      userToken={userToken}
      maxHeadlines={6}
      client={client}
      category={category}
      showImmediate
      searchParams={{
        page: 0,
        filters
      }}
    />
  );
}

Parameters

client

GSEClient

required

The initialized Algolia Generative Experiences client.

category

string

required

The category used for retrieving the headlines.

maxHeadlines

number

default:4

The number of headlines to display (between 1 and 1000).

onlyPublished

boolean

default:true

Whether to only return headlines with generated content.

showImmediate

boolean

default:true

Whether to generate and display the headlines on load.

showFeedback

boolean

default:false

Whether to show the feedback widget. If true, you also need to provide a userToken.

userToken

string

The user token needed for computing feedback. Required if showFeedback is true.

searchParams

SearchParamsObject

Search parameters that are applied when fetching headlines. Can be used for pagination or custom filtering.Not all search parameters are supported. Some parameters are ignored to ensure the correct functioning of the widget: facetFilters, hitsPerPage, optionalFilters, attributesToHighlight and getRankingInfo.For more information, see API parameters.

children

(props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.The default implementation is:

React

function defaultRender(props) {
  return (
    <section
      className={cx(
        "ais-GuideHeadlinesContent-wrapper",
        props.classNames?.wrapper,
      )}
    >
      <props.View />
    </section>
  );
}

view

ViewProps

The view component into which your guide headlines will be rendered.The default implementation is:

React

function ListView(props) {
  return (
    <div
      className={cx(
        "ais-GuideHeadlinesContent-container",
        props.classNames?.container,
      )}
    >
      {props.items.map((item) => (
        <div
          key={item.objectID}
          className={cx(
            "ais-GuideHeadlinesContent-item",
            props.classNames?.item,
          )}
        >
          <props.itemComponent
            createElement={createElement}
            Fragment={Fragment}
            classNames={props.classNames}
            item={item}
            getters={props.getters}
          />
        </div>
      ))}
      {props.showFeedback && (
        <props.feedbackComponent
          castFeedback={props.castFeedback}
          objectIDs={props.items.map((item) => item.objectID)}
          voteTarget="headline"
          alreadyCast={props.alreadyCast}
          createElement={createElement}
          Fragment={Fragment}
        />
      )}
    </div>
  );
}

itemComponent

({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

Component to display the headlines.

classNames

HeadlinesButtonClassNames

The class names for the component.

TypeScript

type HeadlinesButtonClassNames = Partial<{
  wrapper?: string;
  container?: string;
  itemsContainer?: string;
  item?: string;
  itemContent?: string;
  itemTitle?: string;
  itemDescription?: string;
  itemImage?: string;
  list?: string;
  readMore?: string;
}>;

JavaScript

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

Installation

The Algolia Guides JavaScript package is available on the npm registry.

npm install @algolia/generative-experiences-js

yarn add @algolia/generative-experiences-js

Usage

JavaScript

import { createClient } from "@algolia/generative-experiences-api-client";
import { guidesHeadlines } from "@algolia/generative-experiences-js";

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

guidesHeadlines({
  container: "#headlines",
  client: client,
  userToken: "test-user",
  showImmediate: true,
  showFeedback: true,
  category: "category",
});

Parameters

client

GSEClient

required

The initialized Algolia Generative Experiences client.

category

string

required

The category used for retrieving the headlines.

maxHeadlines

number

default:4

The number of headlines to display (between 1 and 1000).

onlyPublished

boolean

default:true

Whether to only return headlines with generated content.

showImmediate

boolean

default:true

Whether to generate and display the headlines on load.

showFeedback

boolean

default:false

Whether to show the feedback widget. If true, you also need to provide a userToken.

userToken

string

The user token needed for computing feedback. Required if showFeedback is true.

children

(props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.The default implementation is:

JavaScript

function defaultRender(props) {
  return (
    <section
      className={cx(
        "ais-GuideHeadlinesContent-wrapper",
        props.classNames?.wrapper,
      )}
    >
      <props.View />
    </section>
  );
}

view

ViewProps

The view component into which your guide headlines will be rendered.The default implementation is:

JavaScript

function ListView(props) {
  return (
    <div
      className={cx(
        "ais-GuideHeadlinesContent-container",
        props.classNames?.container,
      )}
    >
      {props.items.map((item) => (
        <div
          key={item.objectID}
          className={cx(
            "ais-GuideHeadlinesContent-item",
            props.classNames?.item,
          )}
        >
          <props.itemComponent
            createElement={createElement}
            Fragment={Fragment}
            classNames={props.classNames}
            item={item}
            getters={props.getters}
          />
        </div>
      ))}
      {props.showFeedback && (
        <props.feedbackComponent
          castFeedback={props.castFeedback}
          objectIDs={props.items.map((item) => item.objectID)}
          voteTarget="headline"
          alreadyCast={props.alreadyCast}
          createElement={createElement}
          Fragment={Fragment}
        />
      )}
    </div>
  );
}

itemComponent

({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

Component to display the headlines.

classNames

HeadlinesButtonClassNames

The class names for the component.

TypeScript

type HeadlinesButtonClassNames = Partial<{
  wrapper?: string;
  container?: string;
  itemsContainer?: string;
  item?: string;
  itemContent?: string;
  itemTitle?: string;
  itemDescription?: string;
  itemImage?: string;
  list?: string;
  readMore?: string;
}>;

Search and Discovery platform

Optimization and Personalization

AI-powered experiences

Production and scale

GuidesHeadlines

React

Installation

Usage

Parameters

JavaScript

Installation

Usage

Parameters

​React

​Installation

​Usage

​Parameters

​JavaScript

​Installation

​Usage

​Parameters

React

Installation

Usage

Parameters

JavaScript

Installation

Usage

Parameters