operand-js v0.1.73

Operand-JS

A component library for the Operand API.

Install Operand-JS

npm i operand-js

Install our npm package that contains our component.

Get SetIDs

Note: Skip this step if you are a ‘managed’ user. We will send you everything you need.

You will need to specify which document sets you want to search over via their setID. You can find this by making an API request as detailed here in our documentation or by getting it from the URL in your dashboard.

You can list any number of document sets to be searched over in a given search component.

Setup an API Key

Note: Skip this step if you are a ‘managed’ user. We will send you everything you need.

Because this API key will be exposed client side we strongly recommend setting very specific scopes. For the Operand-JS to work at its most basic functionality is only requires the “search” scope on the setIDs that are specified in the component. If you want feedback functionality an additional feedback scope is required on those same sets.

Scopes are specified as “’scope’:’setid’” in a comma separated list during API Key creation.

Adding the Component

First you need to import the component into your project.

import { SearchBar } from 'operand-js';

Then you will create the component by providing the necessary properties.

<SearchBar apiKey="Your APIKey" setIDs={['String Array of Document Set IDs']}>
  {'At Least One Child'}
</SearchBar>

Required Properties

For your child we recommend rendering a fake search bar or just a search icon. It will be clickable to open the search modal.

Optional Properties

<SearchBar
  apiKey="Your APIKey"
  setIDs={['String Array of Document Set IDs']}
  placeholderText="Text you want shown in modal input"
  feedback={true}
  keyboardShortcut="A keyboard shortcut to open the modal"
>
  {'At Least One Child'}
</SearchBar>

For the keyboardShortcut an example is “ctrl+k”.

Component Styling

Currently there is no custom styling for the component and we used tailwind to style the component.

Non-Tailwind Projects:

We have provided a minified tailwind.css file that can be imported to style the component for non-tailwind projects.

import 'operand-js/dist/tailwind.css';

Tailwind Projects:

Projects with tailwind must simply include the node-module in the contents section of ‘tailwind.config.js’.

module.exports = {
  content: [
		....
    "./node_modules/operand-js/dist/*.js",
  ],
	....
}

Questions?

Send us a message at support@operand.ai.