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:

`ts
import { TrieveSDK } from "trieve-ts-sdk";

export const trieve = new TrieveSDK({
apiKey: "",
datasetId: "",
});
`

And then you can use any of the two components in your React application or as web component:

$3

Screenshots

!light closed
!dark closed
!light open

#### Usage in React:

`jsx

`

#### Usage in Web Components:

`js
initModalSearch({
trieve: new TrieveSDK({
// your options
})
})




`

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:

`typescript
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:help@trieve.ai?subject=") | null |
| responsive | boolean | false |

$3

Screenshots

!light
!dark

#### Usage in React:

`jsx

`

#### Usage in Web Components:

`html

`

#### Usage with Vanilla JS
`javascript
import { renderToDiv } from 'trieve-search-component/vanilla';
const root = document.getElementById('root');
renderToDiv(root, {
apiKey: ""
datasetId: ""
// ... 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

`sh
$clients/search-component yarn
$clients/search-component yarn dev
`

Run the example application

`sh
$clients/search-component cd example/
$clients/search-component yarn
$clients/search-component yarn dev
``