typescript hoc arrow function code example

typescript hoc arrow function

1

1 Example

0
// withBlueBackground.ts

import React from 'react';

export type ColorShade = 'light' | 'dark';

const getBlueShade = (shade?: ColorShade) => {
  switch (shade) {
    case 'dark':
      return 'navy';
    case 'light':
      return 'skyblue';
    default:
      return 'blue';
  }
};

export interface OwnBlueBackgroundProps {
  shade?: ColorShade;
}

export interface InjectedBlueBackgroundProps {
  backgroundColor: string;
}

const withBlueBackground = <P extends OwnBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P & InjectedBlueBackgroundProps>
) => class WithBlueBackground extends React.Component<
  P & InjectedBlueBackgroundProps
> {
  public render() {
    return (
      <UnwrappedComponent
        {...this.props}
        backgroundColor={getBlueShade(this.props.shade)}
      />
    );
  }
};

export default withBlueBackground;
by on

Other Code Examples