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.