How to use the searchkit.SearchkitComponent function in searchkit

'NoHits.NoResultsFound': 'No results found for {query}.',
  'NoHits.NoResultsFoundDidYouMean': 'No results found for {query}. Did you mean {suggestion}?',
  'NoHits.DidYouMean': 'Search for {suggestion} instead',
  'NoHits.SearchWithoutFilters': 'Search for {query} without filters',
  'NoHits.Error': "Sorry, we're having technical issues. Please check your internet connection and try again.",
  'NoHits.ResetSearch': 'Reset Search'
};
CRUKSearchkitNoResults.propTypes = defaults({
  suggestionsField: React.PropTypes.string,
  errorComponent: React.PropTypes.func,
  component: React.PropTypes.func,
  noResultsLabel: React.PropTypes.object,
  noResultsTitle: React.PropTypes.string,
  noResultsBody: React.PropTypes.object,
  errorMessage: React.PropTypes.string,
  translations: _searchkit.SearchkitComponent.translationsPropType(CRUKSearchkitNoResults.translations)
}, _searchkit.SearchkitComponent.propTypes);
CRUKSearchkitNoResults.defaultProps = {
  errorComponent: _CRUKSearchkitNoResultsErrorDisplay2.default,
  component: _CRUKSearchkitNoResultsDisplay2.default
};
exports.default = CRUKSearchkitNoResults;

}).length > 0;
      if (searchOnLoad && !this.props.test) return null;
      return _react2.default.createElement(
        'div',
        { className: 'col-xs-12 col-sm-8 col-sm-push-2 help-text' },
        this.props.helptext || _react2.default.createElement(
          'h2',
          null,
          'Please enter a keyword in the text box to start searching.'
        )
      );
    }
  }]);

  return CRUKSearchkitHelpText;
}(_searchkit.SearchkitComponent);

CRUKSearchkitHelpText.propTypes = {
  helptext: _react2.default.PropTypes.object,
  test: _react2.default.PropTypes.bool
};
exports.default = CRUKSearchkitHelpText;

_react2.default.createElement(
          'div',
          null,
          gtm.noScriptAsReact()
        ),
        _react2.default.createElement(
          'div',
          { id: this.props.scriptId || 'react-google-tag-manager-gtm' },
          gtm.scriptAsReact()
        )
      );
    }
  }]);

  return CRUKSearchkitGTM;
}(_searchkit.SearchkitComponent);

CRUKSearchkitGTM.propTypes = {
  gtmId: _react2.default.PropTypes.string.isRequired,
  dataLayerName: _react2.default.PropTypes.string,
  additionalEvents: _react2.default.PropTypes.object,
  scriptId: _react2.default.PropTypes.string,
  searchName: _react2.default.PropTypes.string
};

exports.default = CRUKSearchkitGTM;

CRUKSearchkitDateRange.propTypes = _extends({
  startDate: _react2.default.PropTypes.object,
  endDate: _react2.default.PropTypes.object,
  numberOfMonths: _react2.default.PropTypes.number,
  initialVisibleMonth: _react2.default.PropTypes.func,
  onDatesChange: _react2.default.PropTypes.func,
  onFocusChange: _react2.default.PropTypes.func,
  focusedInput: _react2.default.PropTypes.bool,
  displayFormat: _react2.default.PropTypes.string,
  showClearDates: _react2.default.PropTypes.bool,
  field: _react2.default.PropTypes.string,
  startDateField: _react2.default.PropTypes.string,
  endDateField: _react2.default.PropTypes.string,
  id: _react2.default.PropTypes.string
}, _searchkit.SearchkitComponent.propTypes);


CRUKSearchkitDateRange.defaultProps = {
  isOutsideRange: function isOutsideRange() {
    return false;
  }
};

exports.default = CRUKSearchkitDateRange;

return _react2.default.createElement(
        'p',
        { className: mainClass() },
        'Did you mean\xA0',
        _react2.default.createElement(
          'a',
          { href: '#t', className: mainClass('link'), onClick: this.clickHandle },
          suggestion
        ),
        '?'
      );
    }
  }]);

  return CRUKSearchkitDidYouMean;
}(_searchkit.SearchkitComponent);

CRUKSearchkitDidYouMean.propTypes = {
  field: _react2.default.PropTypes.string,
  minResults: _react2.default.PropTypes.number
};
CRUKSearchkitDidYouMean.defaultProps = {
  field: 'body',
  minResults: 10
};
exports.default = CRUKSearchkitDidYouMean;

)
      );
    }
  }]);

  return CRUKSearchkitLocationInput;
}(_searchkit.SearchkitComponent);

CRUKSearchkitLocationInput.propTypes = _extends({
  queryDelay: _react2.default.PropTypes.number,
  placeholder: _react2.default.PropTypes.string,
  initialValue: _react2.default.PropTypes.string,
  radius: _react2.default.PropTypes.string,
  location: _react2.default.PropTypes.object,
  fixtures: _react2.default.PropTypes.array
}, _searchkit.SearchkitComponent.propTypes);
exports.default = CRUKSearchkitLocationInput;

_react2.default.createElement(_reactDates.DateRangePicker, _extends({}, this.props, {
          onDatesChange: this.onDatesChange,
          onFocusChange: this.onFocusChange,
          focusedInput: focusedInput,
          startDate: startDate,
          endDate: endDate,
          initialVisibleMonth: initialVisibleMonth,
          displayFormat: 'DD/MM/YYYY',
          numberOfMonths: numberOfMonths
        }))
      );
    }
  }]);

  return CRUKSearchkitDateRange;
}(_searchkit.SearchkitComponent);

CRUKSearchkitDateRange.propTypes = _extends({
  startDate: _react2.default.PropTypes.object,
  endDate: _react2.default.PropTypes.object,
  numberOfMonths: _react2.default.PropTypes.number,
  initialVisibleMonth: _react2.default.PropTypes.func,
  onDatesChange: _react2.default.PropTypes.func,
  onFocusChange: _react2.default.PropTypes.func,
  focusedInput: _react2.default.PropTypes.bool,
  displayFormat: _react2.default.PropTypes.string,
  showClearDates: _react2.default.PropTypes.bool,
  field: _react2.default.PropTypes.string,
  startDateField: _react2.default.PropTypes.string,
  endDateField: _react2.default.PropTypes.string,
  id: _react2.default.PropTypes.string
}, _searchkit.SearchkitComponent.propTypes);

v
        );
      });

      if (list.join() === '') return null;

      return _react2.default.createElement(
        'ul',
        { className: listClasses, ref: 'autocompleteList' },
        list
      );
    }
  }]);

  return CRUKSearchkitAutocompleteList;
}(_searchkit.SearchkitComponent);

CRUKSearchkitAutocompleteList.propTypes = {
  inputState: _react2.default.PropTypes.func,
  autocompleteItems: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string),
  listClasses: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string),
  autocompleteActive: _react2.default.PropTypes.bool,
  toggle: _react2.default.PropTypes.func
};
CRUKSearchkitAutocompleteList.defaultProps = {
  listClasses: ['cr-autocomplete'],
  autocompleteItems: []
};
exports.default = CRUKSearchkitAutocompleteList;

noResultsTitle: this.props.noResultsTitle,
        translate: this.translate,
        bemBlocks: this.bemBlocks,
        suggestion: suggestion,
        query: query,
        filtersCount: this.getFilterCount(),
        resetFiltersFn: this.resetFilters.bind(this),
        setSuggestionFn: this.setQueryString.bind(this, suggestion)
      };

      return React.createElement(this.props.component, props);
    }
  }]);

  return CRUKSearchkitNoResults;
}(_searchkit.SearchkitComponent);

CRUKSearchkitNoResults.translations = {
  'NoHits.NoResultsFound': 'No results found for {query}.',
  'NoHits.NoResultsFoundDidYouMean': 'No results found for {query}. Did you mean {suggestion}?',
  'NoHits.DidYouMean': 'Search for {suggestion} instead',
  'NoHits.SearchWithoutFilters': 'Search for {query} without filters',
  'NoHits.Error': "Sorry, we're having technical issues. Please check your internet connection and try again.",
  'NoHits.ResetSearch': 'Reset Search'
};
CRUKSearchkitNoResults.propTypes = defaults({
  suggestionsField: React.PropTypes.string,
  errorComponent: React.PropTypes.func,
  component: React.PropTypes.func,
  noResultsLabel: React.PropTypes.object,
  noResultsTitle: React.PropTypes.string,
  noResultsBody: React.PropTypes.object,

onBlur: this.onBlur,
            onKeyPress: this.onKeyPress,
            getSuggestLabel: this.getSuggestLabel,
            location: this.props.location,
            radius: this.props.radius,
            country: this.props.country,
            inputClassName: inputClassName
          }),
          _react2.default.createElement('div', { className: 'geoSuggestLoader', ref: 'geoLoader' })
        )
      );
    }
  }]);

  return CRUKSearchkitLocationInput;
}(_searchkit.SearchkitComponent);

CRUKSearchkitLocationInput.propTypes = _extends({
  queryDelay: _react2.default.PropTypes.number,
  placeholder: _react2.default.PropTypes.string,
  initialValue: _react2.default.PropTypes.string,
  radius: _react2.default.PropTypes.string,
  location: _react2.default.PropTypes.object,
  fixtures: _react2.default.PropTypes.array
}, _searchkit.SearchkitComponent.propTypes);
exports.default = CRUKSearchkitLocationInput;