Skip to main content

Slots

Api docs for all slots . api docs

Props

  • children: The original header content
  • parts details

The search input and close button area which hides on scroll.

The part props can be used to render only parts of the header element.

Example: Render only the input

import { FindkitUI, html } from "@findkit/ui";

const ui = new FindkitUI({
publicToken: "<TOKEN>",
slots: {
Header(props) {
return html`<${props.parts.Input} />`;
},
},
});

Content

api docs

Props

  • children

The content below the header.

Layout

api docs

Props

  • children
  • header: The header element
  • content: The content element

The containing element for the header and the content elements. This slot can be used to customize the element positioning.

Group

api docs

Props

  • title: The group title string
  • previewSize: The preview size number
  • total: Total hits in the group
  • fetchedHits: How many of the hits has been fetched
  • id: The group id
  • parts details
  • children

The list of hits on the initial view when using multiple groups.

Results

New in v0.19.0

api docs

Props

  • title: The group title string when using multiple groups
  • total: Total hits in the group
  • fetchedHits: How many of the hits has been fetched
  • id: The group id
  • parts details
  • children

The list of hits when not using groups and when navigated to a single group view when using multiple groups.

Hit

api docs

Props

Used to customize how the each search result hits are rendered. See Custom Fields.

Example

import { FindkitUI, html } from "@findkit/ui";

const ui = new FindkitUI({
publicToken: "pwrOBq0GR",
slots: {
Hit(props) {
return html`
<div>
<h2>
${props.hit.superwordsMatch ? "🔥" : ""}
<a href=${props.hit.url}>${props.hit.title}</a>
(${props.hit.score})
</h2>
<${props.parts.Highlight} />
tags: ${props.hit.tags.join(", ")}
</div>
`;
},
},
});
Open in a new tab view source code in Github or edit online in JSBin or Codesandbox