feat: remove default props

.eslintrc.yml

@@ -24,6 +24,9 @@ rules:
   # disable no-unresolved since we don't install the deps
   # of our react example app
   import/no-unresolved: off
+  react/require-default-props:
+    - warn
+    - functions: defaultArguments
   jest/expect-expect:
     - warn
     - assertFunctionNames:

README.md

@@ -22,12 +22,8 @@ class TitleComponent extends Component {
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   };
 
-  static defaultProps = {
-    children: null,
-  };
-
   render() {
-    const {title, children} = this.props;
+    const {title, children = null} = this.props;
     return (
       <Overridable id="TitleComponent.container" title={title}>
         <>

src/overridable.js

@@ -36,7 +36,7 @@ export function parametrize(Component, extraProps) {
 /**
  * React component to enable overriding children when rendering.
  */
-function Overridable({id, children, ...restProps}) {
+function Overridable({id = null, children = null, ...restProps}) {
   const overriddenComponents = useContext(OverridableContext);
   const child = children ? React.Children.only(children) : null;
   const childProps = child ? child.props : {};
@@ -62,26 +62,18 @@ Overridable.propTypes = {
   id: PropTypes.string,
 };
 
-Overridable.defaultProps = {
-  id: null,
-  children: null,
-};
-
 /**
  * High-order component to override an existing React component and provide a new component instead.
  */
 Overridable.component = (id, Component) => {
-  const Overridden = ({children, ...props}) => {
+  const Overridden = ({children = null, ...props}) => {
     const overriddenComponents = useContext(OverridableContext);
     const overriddenComponent = overriddenComponents[id];
     return React.createElement(overriddenComponent || Component, props, children);
   };
   Overridden.propTypes = {
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   };
-  Overridden.defaultProps = {
-    children: null,
-  };
   const name = Component.displayName || Component.name;
   Overridden.displayName = `Overridable(${name})`;
   Overridden.originalComponent = Component;

src/overridable.test.js

@@ -6,17 +6,12 @@
 class ExampleComponent extends Component {
   static propTypes = {
     title: PropTypes.string.isRequired,
     color: PropTypes.oneOf(['blue', 'green', 'red']),
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   };
 
-  static defaultProps = {
-    color: 'blue',
-    children: null,
-  };
-
   render() {
-    const {title, color, children} = this.props;
+    const {title, color = 'blue', children = null} = this.props;
     return (
       <Overridable id="ExampleComponent.container" cmpTitle={title} cmpColor={color}>
         <>

src/store.test.js

@@ -6,15 +6,11 @@
 class ExampleComponent extends Component {
   static propTypes = {
     title: PropTypes.string.isRequired,
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   };
 
-  static defaultProps = {
-    children: null,
-  };
-
   render() {
-    const {title, children} = this.props;
+    const {title, children = null} = this.props;
     return (
       <>
         <h1>{title}</h1>