logo

English

Installation

    yarn add @lableb/react-sdk # npm i @lableb/react-sdk

Getting Started

Add Lableb's Provider around Lableb's components before you start

    <LablebProvider options={{ ... }}>
        {/*
          * put any Lableb's related components here
          */}
    </LablebProvider>

We suggest adding the provider component at your top level component like the default index.js or App.js in regular react application where it can be wrapped around all other component to avoid having any nested component outside the provider.
The provider need single options object that have your credential and preferences to connect with Lableb's Cloud Servers.

example

import { SDKOptions } from '@lableb/react-sdk';

const options: SDKOptions = {
  projectName: 'test',
  collectionName: 'posts',
  searchToken: 'qU4m509882-XH52Rfu-5235-H-A0y-AeN77V',
  userCountry: 'AE',
  userIp: '42.33.12.22',
  userId: 876676,
  generateSessionId: () => '8fav8', // unique session id
  // single document url schema where `{id}` will be replaced with your document id accordingly
  itemURLSchema: 'http://my-website.com/all-documents/{id}', 
  searchHandler: 'default',
  autoCompleteHandler: 'suggest',
  recommendHandler: 'recommend',
  recommendOptions: {
    currentPage: 0,
    pageSize: 10,
  },
  searchOptions: {
    currentPage: 0,
    pageSize: 10,
  },
  autocompleteOptions: {
    enableAutoComplete: true,
    currentPage: 0,
    pageSize: 10,
  },
}


function App() {
  return (
    <LablebProvider options={options}>

      <LablebSearch />

    </LablebProvider>
  );
}

SDK Options

OptionsDefaultDescriptions
projectName*-project name
collectionName*"posts"collection name
searchToken*-used in search, autocomplete, recommend
searchHandler"default"configured handler used in search queries
autoCompleteHandler"suggest"configured handler used in autocomplete queries
recommendHandler"recommend"configured handler used in recommendation
userCountry-user country ISO 3166 code string
userIp-user ip address
userId-user id
generateSessionId-function that return unique sessions string
itemURLSchema-url schema that represent single document url in your website (replace document/product/...etc unique name or id with {id})
searchOptions{ pageSize: 10, currentPage: 0 }search pagination options
recommendOptions{ pageSize: 10, currentPage: 0 }recommendation pagination options
autocompleteOptions{ pageSize: 10, currentPage: 0, enableAutoComplete: false }autocomplete pagination options
(fields marked with * are required)