babel-react-defaultprops

babel-react-defaultprops

A babel plugin that extracts es6 default parameters and append it to the component property named __defaultProps.

Usage

npm install --save-dev babel-react-defaultprops

yarn add -D babel-react-defaultprops

Add the plugin to the Babel configuration:

babel.config.js

module.exports = {
plugins: ['module:babel-react-defaultprops'],
};

Example

Before:

export function FunctionComponent({ bar, foo = 'func' }) {
  return <div>{bar + foo}</div>;
}

After:

function FunctionComponent(_ref) {
  var bar = _ref.bar,
    _ref$foo = _ref.foo,
    foo = _ref$foo === void 0 ? 'func' : _ref$foo;
  return _react['default'].createElement('div', null, bar + foo);
}

FunctionComponent.__defaultProps = {
  foo: 'func',
};

Or with defaults in function body:

Before:

export const VariableComponent = (props) => {
  const { bar, foo = 'variable' } = props;
  return <div>{bar + foo}</div>;
};

After:

var VariableComponent = function VariableComponent(props) {
  var bar = props.bar,
    _props$foo2 = props.foo,
    foo = _props$foo2 === void 0 ? 'variable' : _props$foo2;
  return _react['default'].createElement('div', null, bar + foo);
};

VariableComponent.__defaultProps = {
  foo: 'variable',
};

For more example look into the test folder.

Typescript

If using typescript ad following to theglobal.d.ts file:

declare module 'react' {
  export interface FunctionComponent<P = unknown> {
    __defaultProps?: Partial<P>;
  }
}
export {};

Node that the default props with the locale variable as a value in the function body will not be included.