React SDK setup

Prerequisite

Steps for setup

1. To install the latest package in your project go to the terminal and install the package
   https://github.com/hawksearch/react-hawksearch.git#latest
   
   

   npm install git+https://github.com/hawksearch/react-hawksearch.git#latest

   It will install the latest package in your preview application.

2. Create a directory for the hawksearch integration scripts and widgets (e.g. assets/js/hawksearch/react)

3. Create an inedx.jsx in this new directory and add it as an entry file in webpack.config.js alongside some build configuration

   module.exports = { entry: { main: [ './assets/js/hawksearch/react/index.jsx' ... ] }, module: { rules: [ { test: /\.jsx$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-react' ] }, } }, { test: /\.s?css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, 'sass-loader', ], } ] }, plugins: [ new MiniCssExtractPlugin({ filename: "main.css", }) ] ... }

4. Create widgets folder in the react resource directory (e.g. assets/js/hawksearch/react/widgets)

5. Open index.jsx for editing

6. Import all required styles

   import 'react-hawksearch/dist/esm/react-hawksearch.css'; import 'rheostat/css/rheostat.css'; import 'react-dates/lib/css/_datepicker.css';

7. Import and register theme and interface

8. Add all widget references (if there aren’t any created, add these later)

    

9. Build the JS resources (e.g. webpack --mode development)

Next steps

Create widget