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
Usage
import { createClient } from "@algolia/generative-experiences-api-client";
import { GuidesHeadlines } from "@algolia/generative-experiences-react";
const client = createClient({
appId: "ALGOLIA_APPLICATION_ID",
indexName: "your_index_name",
searchOnlyAPIKey: "ALGOLIA_SEARCH_API_KEY",
region: "us",
});
function App({ userToken, category }) {
//...
return (
<GuidesHeadlines
showFeedback
userToken={userToken}
nbHeadlines={6}
client={client}
category={category}
showImmediate
/>
);
}
Parameters
The initialized Algolia Generative Experiences client.
The category used for retrieving the headlines.
The number of headlines to display.
Whether to only return headlines with generated content.
Whether to generate and display the headlines on load.
Whether to show the feedback widget.
If true, you also need to provide a userToken.
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:function defaultRender(props) {
return (
<section
className={cx(
"ais-GuideHeadlinesContent-wrapper",
props.classNames?.wrapper,
)}
>
<props.View />
</section>
);
}
The view component into which your guide headlines will be rendered.The default implementation is: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.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
Usage
import { createClient } from "@algolia/generative-experiences-api-client";
import { guidesHeadlines } from "@algolia/generative-experiences-js";
const client = createClient({
appId: "ALGOLIA_APPLICATION_ID",
indexName: "your_index_name",
searchOnlyAPIKey: "ALGOLIA_SEARCH_API_KEY",
region: "us",
});
guidesHeadlines({
container: "#headlines",
client: client,
userToken: "test-user",
showImmediate: true,
showFeedback: true,
category: "category",
});
Parameters
The initialized Algolia Generative Experiences client.
The category used for retrieving the headlines.
The number of headlines to display.
Whether to only return headlines with generated content.
Whether to generate and display the headlines on load.
Whether to show the feedback widget.
If true, you also need to provide a userToken.
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:function defaultRender(props) {
return (
<section
className={cx(
"ais-GuideHeadlinesContent-wrapper",
props.classNames?.wrapper,
)}
>
<props.View />
</section>
);
}
The view component into which your guide headlines will be rendered.The default implementation is: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.type HeadlinesButtonClassNames = Partial<{
wrapper?: string;
container?: string;
itemsContainer?: string;
item?: string;
itemContent?: string;
itemTitle?: string;
itemDescription?: string;
itemImage?: string;
list?: string;
readMore?: string;
}>;
