with-default-props lets you write DefaultProps for function components in a painless way.
Only one function is exported. Properties appearing in defaultProps will become optional in WrappedComponent.
function withDefaultProps(Component, defaultProps): WrappedComponent- NPM:
npm install with-default-props - Yarn:
yarn add with-default-props
import { withDefaultProps } from 'with-default-props'
type Props = {
text: string;
onClick: () => void;
};
function Component(props: Props) {
return <div onClick={props.onClick}>{props.text}</div>;
}
// `onClick` is optional now.
const Wrapped = withDefaultProps(Component, { onClick: () => {} })
function App1() {
// ✅
return <Wrapped text="hello"></Wrapped>
}
function App2() {
// ✅
return <Wrapped text="hello" onClick={() => {}}></Wrapped>
}
function App3() {
// ❌
// Error: "text" is missing!
return <Wrapped onClick={() => {}}></Wrapped>
}React functional component default props vs default parameters, but they don't play well with TypeScript.