@cdxker/trieve-search-component v0.4.50

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 "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
})

License

MIT

Development Guide

Deploying to view search playground UI

The example/ folder shows the example application for what rendering this would look like

Run the example, search-component, css, javascript and watcher for demos page

$clients/search-component yarn all

or to run each individually

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

Viewing it on demos page

cd clients/search-component/
yarn all

Set environment variable in server/.env

SEARCH_COMPONENT_URL="http://localhost:8000"