@fenderdigital/react-with-default-props

WithDefaultProps for Fender React UI Kit

Description

Motivation: React Class Component type definitions don't support type checking on default props, but functional components do (weird).

This adds a function component wrapped to the class and inject default props there so we can get accurate intellisense and autocompletion features, and a happy compiler that doesn't complain about props that might be undefined

Installation and Usage

yarn add @fenderdigital/react-with-default-props --save

import { withDefaultProps, ComponentWithDefaults, DefaultProps } from '@fenderdigital/react-with-default-props';
// also available is PureComponentWithDefaults

interface PropsInterface {
  requiredString: string;
  optionalString?: string;
}

class MyComponent extends ComponentWithDefaults<PropsInterface> {
  public static defaultProps: DefaultProps<PropsInterface> = {
    optionalString: 'optional',
  }

  render() {
    return <div>{this.props.optionalString}</div>;
  }
}

export default withDefaultProps<PropsInterface>(MyComponent, MyComponent.defaultProps);

// you can also optionally do it like so:

class MyComponent extends ComponentWithDefaults<PropsInterface> {
  render() {
    return <div>{this.props.optionalString}</div>;
  }
}

export default withDefaultProps<PropsInterface>(MyComponent, {
  optionalString: 'optional',
});


// Function Component Example

import { FCWithDefaults, DefaultProps } from '@fenderdigital/react-with-default-props';

interface PropsInterface {
  requiredString: string;
  optionalString?: string;
}

const defaultProps: DefaultProps = {
  optionalString: 'this is optional',
}

const MyComponent: FCWithDefaults<PropsInterface> = props => {
  return <div>{this.props.optionalString}</div>;
}

export default withDefaultProps(MyComponent, defaultProps);

Development

Check the Monorepo README for development documentation.