/
React SDK setup

React SDK setup

Owned by gabriel.georgiev (Deactivated)
Last updated: Mar 05, 2021
1 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
    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 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

    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)

 

Next steps

https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468460945

 

Related content