Skip to content

Nibi Search + React

Version: 1.0

Last updated: 19 November 2018

React Component is a npm module that can be use as a dependency in react project.

React Component Props

Property Optional/Required Description
config Required Configuration properties
options optional Options (Settings)
onSearch optional Events (callbacks)
onBeforeSearch optional Events (callbacks)

1. Get Access Token

User Access Token

Datasource Access Token

npm install [email protected] --save

3. Import dependency

import NLQSearch from 'nibi.ai.nlq'
import 'nibi.ai.nlq/build/styles.css';

Advance configuration and settings

Example

import React, { Component } from 'react'

import NLQSearch from 'nibi.ai.nlq'
import 'nibi.ai.nlq/build/styles.css';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nibiOptions : {
        placement : 'TOP'
      },
      nibiConfig : {
        datasource: 'DATASOURCE', //Required
        apiKey: 'API_KEY' //Required
      }
    }
  }
  onSearch = (message) => {
    console.log('onSearch message', message);
  }

  beforeAskQuestion = (npl) => {
    console.log('beforeAskQuestion npl', npl);
  }

  render() {
    return (
      <div>
        <NLQSearch config={this.state.nibiConfig} options={this.state.nibiOptions} onSearch={this.onSearch} onBeforeSearch={this.beforeAskQuestion} />
      </div>
    )
  }
}