Skip to main content

Slots

Api docs for all slots .

Header​

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 anew tabview source code inGithubor edit online inCodesandbox