React Components and hooks to integrate with Lableb Cloud Search
npm install @lableb/react-sdkEasy, Small, configurable UI library that allow instant integration with Lableb
``sh`
yarn add @lableb/react-sdk # or: npm i @lableb/react-sdk
sh
yarn add @lableb/javascript-sdk axios yup
`$3
> Note: For SSR tech, like next.js you have to alias
and react-dom in your configuration because they are used as peer-dependencies in this library`js
webpack(config) { config.resolve.alias = {
...config.resolve.alias,
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
'@lableb/javascript-sdk': path.resolve(__dirname, './node_modules/@lableb/javascript-sdk/dist/index'),
}
return config;
}
`
How to use
1. Wrap all Lableb's components and hooks within LablebProvider
jsx
import { LablebProvider, GlobalOptions } from '@lableb/react-sdk';const SDK_OPTIONS: GlobalOptions = {
platformName: 'project-name',
APIKey: 'gXPg561985-F-jxboFtqEK100trmgk-OpLsA',
}
export default function Home() {
return (
{'...'}
);
}
`
2. Use Built-in UI components from the library
jsx
import {
LablebProvider,
LablebSearch,
LablebFilters,
LablebPagination,
LablebSearchResults,
} from '@lableb/react-sdk';
const SDK_OPTIONS = {
APIKey: 'gXPg561979-F-jxboFtqEK96trmgk-OpLsA',
platformName: 'shopify-arch',
}
export default function Home() {
return (
);
}
`Build your own UI using Lableb's reactive hooks
Search Hooks
$3
jsx
function App(){ const searchResults = useSearchResults();
return (
{
searchResults?.map((lablebDocument: any) => (
lablebDocument={lablebDocument}
...
/>
))
}
);
}
`
$3
jsx
function App(){ const loading = useIsSearchLoading();
if(loading)
return
return (
...
);
}
`$3
jsx
function App(){ const search = useLablebSearch();
return (
...
/>
);
}
`$3
jsx
function App(){ const query = useSearchQuery();
const setQuery = useSetSearchQuery();
return (
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
);
}
`
$3
jsx
function App(){ const searchResultsCount = useTotalSearchDocumentsCount();
return (
{Found: ${searchResultsCount} results}
);
}
`$3
jsx
function App(){ const searchTime = useTotalSearchTime();
return (
{Search takes: ${searchTime} ms}
);
}
`
$3
jsx
export function App() { const searchResults = useAutocompleteResults();
const sendFeedback = useAutocompleteFeedback();
return (
{
searchResults?.map((lablebDocument) => (
lablebDocument={lablebDocument}
onClick={() => sendFeedback(lablebDocument.feedback)}
/>
))
}
);
}
`Autocomplete Hooks
$3
jsx
function App(){ const autocompleteResults = useAutocompleteResults();
return (
{
autocompleteResults?.map((result, index) => (
}
>
{result?.phrase}
{result?.type || result?.suggestion_type || ''}
))
}
$3
jsx
function App(){ const loading = useIsAutocompleteLoading();
if(loading)
return
return (
...
);
}
`$3
jsx
export function App() { const autocompleteResults = useAutocompleteResults();
const sendFeedback = useAutocompleteFeedback();
return (
{
autocompleteResults?.map((lablebDocument) => (
lablebDocument={lablebDocument}
onClick={() => sendFeedback(lablebDocument.feedback)}
/>
))
}
);
}
`
Recommend Hooks
$3
jsx
function App(){ const recommendResults = useRecommend();
return (
{
recommendResults?.map((lablebDocument: any) => (
lablebDocument={lablebDocument}
...
/>
))
}
);
}
`$3
jsx
function App(){ const loading = useIsRecommendLoading();
if(loading)
return
return (
...
);
}
`$3
jsx
export function App() { const recommendResults = useRecommend({ id: '123' });
const sendFeedback = useRecommendFeedback();
return (
{
recommendResults?.map((lablebDocument) => (
lablebDocument={lablebDocument}
onClick={() => sendFeedback(lablebDocument.feedback)}
/>
))
}
);
}
`Search Results Pagination
$3
jsx
export function App(){ const {
next,
prev,
page,
hasNextPage,
hasPrevPage,
changePage,
totalDocuments,
totalPages,
hasNextTenPage,
hasPrevTenPage,
nextTen,
prevTen,
} = usePagination();
return (
{page}
);
}
`Search Filters
$3
jsx
import { LablebFacets, useFilters } from '@lableb/react-sdk';export function App(){
const filters: LablebFacets = useFilters();
...
}
`where LablebFacets has the following:
ts
export interface LablebFacets {
[key: string]: {
buckets: LablebFacet[];
};
}export interface LablebFacet {
value: string;
count: number;
}
`
$3
jsx
import { SelectedFilters } from '@lableb/react-sdk';export function App(){
const filters: SelectedFilters = useSelectedFilters();
...
}
`where the type of SelectedFilters is:
ts
export interface SelectedFilters {
[key: string]: string[];
}
`$3
jsx
export function FiltersValues({ facetName }:{ facetName:string }){
const toggle = useFilterToggle();
const isSelected = useIsSelected(facetName); // rendering filter values
return (
...
{facetName}
{
buckets
?.map(({ value, count }) => (
${facetName}-${value}}>
${facetName}-${value}-${count}}
type="checkbox"
checked={isSelected(value)}
onChange={() => toggle({ facetName, facetValue: value })}
/>
))
}
);
}
`$3
jsx
export function App(){ const reset = useReset();
return (
);
}
`
$3
jsx
export function App(){ const rangeFiltersArray = useRangeFilters();
...
}
`where Range filters defined as
ts
export interface SDKRangeFilter {
filterName: string,
max?: number,
min?: number,
step?: number,
}
`
Global Options
| property | type | default | description |
| --------------------- | -------| --------- | --------------- |
| platformName* | string | - | Your platform name as written at Lableb Dashboard |
| APIKey* | string | - | Search, Autocomplete, Recommend, and Feedback API Key |
| indexName | string | index | The used data index name as created at Lableb Dashboard \| Collections |
| indexingAPIKey | string | - | Index, Delete API Key |
| searchHandler | string | default | The used search handler name as found at Lableb Dashboard \| Collections \| Handlers |
| autocompleteHandler | string | suggest | The used autocomplete handler name as found at Lableb Dashboard \| Collections \| Handlers |
| recommendHandler | string | recommend | The used recommend handler name as found at Lableb Dashboard \| Collections \| Handlers |
| interceptors | array of functions | [] | pass an array of interceptors functions to manipulate the request before being sent to Lableb. Read in details |
| userId | string | - | end user id |
| userIp | string | - | end user IP address |
| userCountry | string | - | end user country code(ISO-3166) |
| sessionId | string | - | uniques session Id for your end user |
| sessionIdGenerator | function | - | pass callback that generate unique session id string |
| defaultSelectedFilters | DefaultSelectedFilter[] | - | Array of selected filters names and values that will persist |
| dir | "rtl" or "ltr" | "ltr" | the direction of the root component |
| hiddenFilters | string[] | - | filters names that will not be returned in search filters results |
| rangeFilters | SDKRangeFilter[] | - | specify which filter will be displayed as range filter |
| collectRangeFilters | "first" or "last" | - | where to render range filters in relative to other search filters |
$3
ts
export interface DefaultSelectedFilter {
filterName: string,
filterValues: string[],
}
`$3
ts
export interface SDKRangeFilter {
filterName: string,
max?: number,
min?: number,
step?: number,
}
``