React SDK setup

Prerequisite

• Node.js version 11.0.0 or higher
• NPM version 6.0.0 or higher
• Node dependencies:
  • react: ">=16.8.x"
  • react-dom: ">=16.8.x"
  • react-dates: "^21.8.0"
  • react-with-styles-interface-css: "^6.0.0"
  • mini-css-extract-plugin: "^0.9.0" or any equvalent css loader
  • webpack: "^4.43.0"

While installing the prerequisites, if there are any conflicts between node versions,
Use "npm install node-dependency --legacy-peer-deps"

Steps for setup

1. To install the latest package in your project go to the terminal and install the package
   GitHub - hawksearch/react-hawksearch

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 index.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

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';  
import cssInterface from 'react-with-styles-interface-css';

import RheostatDefaultTheme from 'rheostat/lib/themes/DefaultTheme';  
import ReactDatesDefaultTheme from 'react-dates/lib/theme/DefaultTheme';

ThemedStyleSheet.registerInterface(cssInterface);  
ThemedStyleSheet.registerTheme({  
    ...RheostatDefaultTheme,  
    ...ReactDatesDefaultTheme,  
});

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

import "./widgets/search-results";  
...

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