How to use the recompose.defaultProps function in recompose

const Comp = ({ hello, eA }) =>
  <div>
    {(hello: string)}
    {(eA: number)}
    {
      // $ExpectError eA nor any nor string
      (eA: string)
    }
    {
      // $ExpectError hello nor any nor number
      (hello: number)
    }
  </div>;

const enhacer: HOC&lt;*, EnhancedCompProps&gt; = compose(
  defaultProps({
    hello: "world"
  }),
  withProps(props =&gt; ({
    hello: (props.hello: string),
    eA: (props.eA: number),
    // $ExpectError hello nor any nor number
    helloErr: (props.hello: number),
    // $ExpectError eA nor any nor string
    eAErr: (props.eA: string)
  })),
  withProps(props =&gt; ({
    // $ExpectError property not found
    err: props.iMNotExists
  }))
);

return getStylesAndAttributes(layer, workspace).do(opts => optionsLoaded(opts))
                .catch(() => {
                    setLoading(false);
                    return Rx.Observable.of(onError({
                        title: "rulesmanager.errorTitle",
                        message: "rulesmanager.errorLoading"
                    }));
                }).do(() => setLoading(false));
        }).let(emitStop);
};

module.exports = compose(connect(() => ({}), {
    onChangeDrawingStatus: changeDrawingStatus,
    onError: error
}),
defaultProps({dataStreamFactory}),
withStateHandlers(({activeRule: initRule}) => ({
    activeRule: initRule,
    initRule,
    activeEditor: "1",
    styles: [],
    properties: []
}), {
    setOption: ({activeRule}) => ({key, value}) => {
        // Add some reference logic here
        if (key === "workspace") {
            const {layer, workspace, constraints, ...newActive} = activeRule;
            const l = !value ? {layer} : {};
            return {
                activeRule: { ...newActive, workspace: value, ...l},
                styles: [],
                properties: [],

export default () =>
compose(
  editorState,
  // Create initial cursor,
  // Cursor must will be expanded in each level
  defaultProps({ Cursor }),

  // We allow to drag&drop organisms inside editor
  // Also we dont  fire commit of changes, because its own state
  dndState('organisms', 'data', false),

  withHandlers({
    updateEditorState: props => (key, state) => {
      const mutation = props.organisms.setIn(key, state);
      const templateShapeId = UUID.create().toString();
      window.templatesShape = JSON.stringify({
        ...mutation.toJS()[0],
        id: templateShapeId
      });
      props.update(mutation);
    }
  }),

import React from 'react'
import PropTypes from 'prop-types'
import { compose, setDisplayName, setPropTypes, defaultProps, getContext, mapProps } from 'recompose'
import { Trans } from 'react-i18next'

export default compose(
  setDisplayName('T'),
  setPropTypes({
    block: PropTypes.bool,
    tag: PropTypes.string || PropTypes.func,
    ...Trans.propTypes,
    i18nKey: PropTypes.string.isRequired,
    translate: PropTypes.bool,
  }),
  defaultProps({
    block: false,
    tag: 'span',
    translate: true,
  }),
  mapProps(({ block, parent, tag, ...rest }) => ({
    parent: block ? 'div' : (parent || tag),
    ...rest,
  })),
  getContext(Trans.contextTypes)
)((props) => {
  const { i18nKey, children, translate, } = props
  if (!translate) {
    return children
  }
  if (!(/^[\w.:]+$/).test(i18nKey)) {
    console.error(`Invalid i18nKey '${i18nKey}' provided to T for: ${children}`)

export default compose(
    setDisplayName('WalletSelectField'),
    connect(createStructuredSelector({
      connectedWallets: getAllWalletsArray,
    }), {
      push: pushAction
    }),
    setPropTypes({
      dropDownText: PropTypes.string,
      dropDownStyle: PropTypes.object,
      handleSelect: PropTypes.func,
      ERC20: PropTypes.bool,
      valid: PropTypes.bool,
    }),
    defaultProps({
      dropDownText: 'Select Wallet',
      dropDownStyle: {},
      handleSelect: () => {},
      ERC20: false,
      valid: true
    }),
    withStateHandlers(
      { dropdownOpen: false },
      { toggleDropDown: ({ dropdownOpen }) => () => ({ dropdownOpen: !dropdownOpen }) },
    ),
    withHandlers({
      handleConnect: ({ push }) => () => {
        push('/connect')
      }
    })
  )(WalletSelectField)

return TrezorBtcInstructions
  }
  if (walletType.includes('ethereum')) {
    if (wallet.typeLabel.toLowerCase().includes('metamask')) {
      return MetaMaskInstructions
    }
    return EthereumInstructions
  }
}

export default compose(
  setDisplayName('ConfirmTransactionModal'),
  setPropTypes({
    swap: PropTypes.object,
  }),
  defaultProps({
    swap: null,
  }),
  withProps(({ swap }) => {
    const InstructionComponent = swap && getInstructionComponent(swap.tx, swap.sendWallet)
    return {
      InstructionComponent,
      isOpen: Boolean(swap && InstructionComponent),
    }
  })
)(({ swap, InstructionComponent, handleCancel, isOpen }) => (
  
    
      Confirm Transaction
    
    
      {InstructionComponent && (

export const enhanceGeoMap = Component => {
    if (Component.displayName === 'GeoMap') {
        return setDisplayName(Component.displayName)(
            compose(
                defaultProps(GeoMapDefaultProps),
                ...commonEnhancers,
                pure
            )(Component)
        )
    }

    if (Component.displayName === 'GeoMapCanvas') {
        return setDisplayName(Component.displayName)(
            compose(
                defaultProps(GeoMapCanvasDefaultProps),
                ...commonEnhancers,
                pure
            )(Component)
        )
    }
}

import classNames from 'class-names'
import PropTypes from 'prop-types'

import { betaTag } from './Header/style.scss'
import EmailSubscriptionForm from './EmailSubscriptionForm'
import LazyLoad from 'react-lazyload'

import LangLink from 'Components/LangLink'

export default compose(
  setDisplayName('Footer'),
  setPropTypes({
    footerClass: PropTypes.string,
    showEmail: PropTypes.bool
  }),
  defaultProps({
    footerClass: '',
    showEmail: true
  }),
)(({ showEmail, footerClass, translations: { static: { footer: t = {} } = {} } }) => (
  
    {showEmail && (
      <div>
        
          
        
      </div>
    )}
    <div style="{{">
      <footer>
        <div style="{{">
          <div></div></div></footer></div>

export const enhanceChoropleth = Component => {
    const defaultComponentProps =
        Component.displayName === 'Choropleth'
            ? ChoroplethDefaultProps
            : ChoroplethCanvasDefaultProps

    return setDisplayName(Component.displayName)(
        compose(
            defaultProps(defaultComponentProps),
            withPropsOnChange(['colors', 'unknownColor'], ({ colors, unknownColor }) => {
                const colorScale = guessQuantizeColorScale(colors).domain([0, 1000000])

                return {
                    fillColor: feature => {
                        if (feature.value === undefined) return unknownColor
                        return colorScale(feature.value)
                    },
                }
            }),
            withPropsOnChange(
                ['features', 'data', 'matchOn', 'valueFrom', 'fillColor'],
                ({ features, data, matchOn, valueFrom, fillColor }) => {
                    let predicate
                    if (isFunction(matchOn)) {
                        predicate = matchOn

value={selected}
                            placeholder={placeholder}
                            onChange={this.handleChange}
                        />
                    
                
            
        );
    }
    handleChange = (e) => {
        this.props.setOption({key: "ipaddress", value: e.target.value});
    }
}

module.exports = compose(
    defaultProps({
        placeholder: "rulesmanager.placeholders.ip"
    }),
    withLocalized(["placeholder"]))(IpAddress);