withConditional.tsx

import React, { Component } from 'react';
import NewTabLink from 'components/ui/NewTabLink';

interface RequiredProps {
  conditional: boolean;
  conditionalProps: {
    [key: string]: any;
  };
}

/**
 * Optional
 */
export const withConditional = <WrappedComponentProps extends {}>(
  PassedComponent: React.ComponentType<WrappedComponentProps>
) =>
  class extends Component<WrappedComponentProps & RequiredProps, {}> {
    public render() {
      const { conditional, conditionalProps, ...passedProps } = this.props;
      return conditional ? (
        <PassedComponent {...{ ...passedProps, ...(conditionalProps as object) }} />
      ) : (
        <PassedComponent {...passedProps} />
      );
    }
  };

export function test() {
  const NewTabLinkWithConditional = withConditional(NewTabLink);
  return (
    <NewTabLinkWithConditional
      href="asd"
      conditional={true}
      conditionalProps={{
        onClick: (e: React.FormEvent<HTMLAnchorElement>) => {
          console.log(e, 'Been clicked!');
        }
      }}
    />
  );
}