react-klevu

The Missing React library for Klevu Search

react-klevu

Install

npm install --save react-klevu
yarn add react-klevu

Usage

import { useKlevu, KlevuResults } from 'react-klevu'
import 'react-klevu/dist/index.css'

// Get Search url and API key from klevu
const config = {
  searchUrl: 'https://eucs15v2.ksearchnet.com/cs/v2/search',
  apiKey: 'klevu-156925593843210765'
}

// To limit the number of results
const limit = {
  product: 10,
  category: 5,
  suggestion: 2
}

const App = () => {
  // useKlevu Hook takes config object and limit object and gives three props
  // [0] - onSearchFieldChange - Takes search term and hook gives result according to that.
  // [1] - isLoading - Represents the loading state.
  // [2] - searchResults - Gives the results to make results component.

  // Limit object is optional one. if its not given results will be 5 each
  const [onSearchFieldChange, isLoading, searchResults] = useKlevu(
    config,
    limit
  )

  return (
    <div>
      <input onChange={(e) => onSearchFieldChange(e.target.value)} />

      {/* Its default Klevu results component to use */}
      {/* Feel free to make your own with search result */}
      {/* Component Props are self explanatory */}

      <KlevuResults
        searchResults={searchResults}
        isLoading={isLoading}
        handleSuggestionClick={() => {
          alert('Handle Suggestion Click Here')
        }}
        handleProductClick={(product) => {
          alert('Handle Product Click Here')
          console.log('product', product)
        }}
        handleCategoryClick={(category) => {
          alert('Handle Category Click Here')
          console.log('category', category)
        }}
        handleViewAllClick={() => {
          alert('Handle View All Button Click Here')
        }}
        // Use any common props to pass to the root div of the results component.
        // Examples
        // className='custom-styles'
        // style={{}}
      />
    </div>
  )
}

Demo

https://stackblitz.com/edit/react-ts-kwjkwn?file=KlevuSearchExample.tsx

License

MIT ©