React SDK setup

Owned by gabriel.georgiev (Deactivated)
Last updated: Mar 05, 2021
3 min read

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"

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

Â