fast-trieve-search-component v0.11.0

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

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 { 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

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