How to override react class component from third party library?

Question

I am using a third party library called terriajs that gives me access to top level components and parent component in my workspace. However, internal components are sitting inside the node_modules folder.

For example, I have access to StandardUserInterface component which is the main react component. It imports certain components like SidePanel component from node_modules folder. The SidePanel component internally imports a SearchBox component. I need to change the implementation of this SearchBox component. The library doesn't provide me with enough properties to change this functionality.

Therefore, it seems that my best option is to fork the library and add my custom changes. I don't want to do that because I would lose all their future updates. Is there any other way to achieve my requirements without forking and override their implementation in React?

The following is the simplified version of SidePanel for reference:

const SidePanel = createReactClass({
    displayName: "SidePanel",
    mixins: [ObserveModelMixin],

    propTypes: {
      terria: PropTypes.object.isRequired,
      viewState: PropTypes.object.isRequired
    },

    changeSearchText(newText) {
      this.props.viewState.searchState.locationSearchText = newText;

      if (newText.length === 0) {
        removeMarker(this.props.terria);
      }
    },

    search() {
      this.props.viewState.searchState.searchLocations();
    },

    startLocationSearch() {
      this.props.viewState.searchState.showLocationSearchResults = true;
    },

    render() {
      const searchState = this.props.viewState.searchState;
      const emptyWorkbenchValue = this.props.terria.language[
        "EmptyWorkbenchMessage"
      ];
      const emptyWorkbench = getReactElementFromContents(emptyWorkbenchValue);

      return (
          <div className={Styles.header}>

            <SearchBox
              onSearchTextChanged={this.changeSearchText}
              onDoSearch={this.search}
              onFocus={this.startLocationSearch}
              searchText={searchState.locationSearchText}
              placeholder="Search for locations"
            />
        </div>
      );
    }

Answer 1

You should duplicate the original component code in a new component, adding the changes you need, and import this one in your application instead.