trieve-search-component
v0.2.4
Published
The easiest way to get up and running in your app using trieve search.
Downloads
2,660
Readme
Trieve Search Component
The easiest way to get up and running in your app using trieve search.
How to use
Install using your favorite package manager:
yarn add trieve-search-component
# or
npm install trieve-search-component
# or
pnpm install trieve-search-component
After installing the first step is to instantiate a new TrieveSDK
like so:
import { TrieveSDK } from "trieve-ts-sdk";
export const trieve = new TrieveSDK({
apiKey: "<your-api-key>",
datasetId: "<dataset-to-use>",
});
And then you can use any of the two components in your React application or as web component:
Search Modal
Usage in React:
<TrieveModalSearch trieve={trieve} />
Usage in Web Components:
initModalSearch({
trieve: new TrieveSDK({
// your options
})
})
<trieve-modal-search />
If you are using it in JSX environment you will need to add the trieve-modal-search
to the JSX attributes, for solid that would be:
declare module "solid-js" {
namespace JSX {
interface IntrinsicElements {
"trieve-modal-search": {};
"trieve-search": {};
}
}
}
Props
| Name | Type | Default |
| -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ |
| datasetId | string | '' |
| apiKey | string | '' |
| baseUrl | string | "https://api.trieve.ai" |
| type | "docs" | "ecommerce" | "docs" |
| useGroupSearch | boolean | false |
| chat | boolean | true |
| analytics | boolean | true |
| placeholder | string | "Search..." |
| onResultClick | () => void | () => {} |
| theme | "light" or "dark" | "light" |
| searchOptions | AutocompleteReqPayload | { search_type: "fulltext" }
|
| openKeyCombination | { key?: string; label?: string; ctrl?: boolean }[] | [{ ctrl: true }, { key: "k", label: "K" }] |
| ButtonEl | JSX.ElementType | null |
| suggestedQueries | boolean | true |
| defaultSearchQueries | string[] | [] |
| defaultAiQuestions | string[] | [] |
| brandLogoImgSrcUrl | string | null |
| brandName | string | null |
| brand Color | string | #CB53EB |
| problemLink | string (example: "mailto:[email protected]?subject=") | null |
| responsive | boolean | false |
Search Results
Usage in React:
<TrieveSearch apiKey="<your trieve apiKey>" datasetId="<your trieve datasetId" />
Usage in Web Components:
<trieve-search apiKey="<your trieve apiKey>" datasetId="<your trieve datasetId" />
Usage with Vanilla JS
import "trieve-search-component/styles";
import { renderToDiv } from 'trieve-search-component/vanilla';
const root = document.getElementById('root');
renderToDiv(root, {
apiKey: "<Your Trieve Api Key>"
datasetId: "<Your Trieve Dataset Id>"
// ... other props
})
Props
| Name | Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------- | --------------------------- |
| datasetId | string | '' |
| apiKey | string | '' |
| placeholder | string | "Search..." |
| onResultClick | () => void | () => {} |
| theme | "light" or "dark" | "light" |
| searchOptions | SearchChunksReqPayload | { search_type: "hybrid" }
|
License
MIT
Development Guide
The example/
folder shows the example application for what rendering this would look like
Start the listener to update the search-component's css and javascript
$clients/search-component yarn
$clients/search-component yarn dev
Run the example application
$clients/search-component cd example/
$clients/search-component yarn
$clients/search-component yarn dev