How to use react-intl-inject-hoc - 10 common examples

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  connectSocket(
    // 1. urlMapper => (ownerProps: Object) => string
    ({ deviceId, deviceKey }) =>
      deviceKey && `${wsHost}/deviceId/${deviceId}/deviceKey/${deviceKey}`,
    // 2. onMessage => (ownerProps: Object) => datapoint => void
    props => datapoint => props.setDatapoint(props.deviceId, datapoint, true),
    // 3. propsMapper => state => props
    ({ readyState, send, createWebSocket }) => ({
      sendMessage: send,
      isWebSocketClose: readyState.sender === 3 || readyState.viewer === 3,
      reconnect: createWebSocket,
    }),
  ),
  withGetMessages(messages, 'DeviceDataChannelDetail'),
)(DeviceDataChannelDetail);

import { compose } from 'recompose';
import { withGetMessages } from 'react-intl-inject-hoc';
import messages from './messages';
import ApiHint from './ApiHint';

export default compose(withGetMessages(messages, 'ApiHint'))(ApiHint);

import { withGetMessages } from 'react-intl-inject-hoc';
import { compose, pure } from 'recompose';
import Section4 from './Section4';
import messages from './messages';

export default compose(withGetMessages(messages, 'Section4'), pure)(Section4);

import { withGetMessages } from 'react-intl-inject-hoc';
import { compose, pure } from 'recompose';
import Section2 from './Section2';
import messages from './messages';

export default compose(withGetMessages(messages, 'Section2'), pure)(Section2);

import { withGetMessages } from 'react-intl-inject-hoc';
import { compose } from 'recompose';
import DownloadButton from './DownloadButton';
import messages from './messages';

export default compose(withGetMessages(messages, 'DownloadButton'))(
  DownloadButton,
);

import { withGetMessages } from 'react-intl-inject-hoc';
import { compose, pure } from 'recompose';
import Section3 from './Section3';
import messages from './messages';

export default compose(withGetMessages(messages, 'Section3'), pure)(Section3);

import { connect } from 'react-redux';
import compose from 'recompose/compose';
import { withGetMessages } from 'react-intl-inject-hoc';
import messages from './messages';
import { actions } from '../../modules/auth';
import Password from './Password';

export const mapStateToProps = null;
export const mapDispatchToProps = { changePassword: actions.changePassword };

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  withGetMessages(messages, 'Password'),
)(Password);

<button kind="default">
        {t('cancel')}
      </button>
      <button kind="primary">
        {t('save')}
      </button>
    
  
);

export default compose(
  pure,
  withGetMessages(messages, 'Profile'),
  withState('newPassword', 'setNewPassword', ''),
  withState('confirmPassword', 'setConfirmPassword', ''),
  withState('error', 'setError', {
    newPassword: true,
    confirmPassword: true,
  }),
  withState('touched', 'setTouched', {
    newPassword: false,
    confirmPassword: false,
  }),
  withHandlers({
    closeDialog: props =&gt; () =&gt; props.setDialogShow('none'),
    onBlur: props =&gt; field =&gt; () =&gt; {
      props.setTouched({ ...props.touched, [field]: true });
    },
    onNewPasswordChange: props =&gt; (e) =&gt; {

label={t('language')}
        >
          {language}
        
      
    
  
);

export default compose(
  pure,
  withHandlers({
    onEditUserNameClick: props => () => props.setDialogShow('editUserName'),
    onChangePasswordClick: props => () => props.setDialogShow('changePassword'),
  }),
  withGetMessages(messages, 'Profile'),
  withProps((language) => {
    switch(localStorage.getItem('locale')) {
      case 'en':
        language = 'English';
        break;
      case 'zh-TW':
        language = '繁體中文';
        break;
      case 'zh-CN':
        language = '简体中文';
        break;
    }
    return { language };
  }),
)(ProfilePanel);

<button kind="default">
        {t('cancel')}
      </button>
      <button kind="primary">
        {t('save')}
      </button>
    
  
);

export default compose(
  pure,
  withGetMessages(messages, 'Profile'),
  withState('userName', 'setUserName', props =&gt; props.userName),
  withHandlers({
    closeDialog: props =&gt; () =&gt; props.setDialogShow('none'),
    onUserNameChange: props =&gt; e =&gt; props.setUserName(e.target.value),
    onSave: props =&gt; () =&gt; {
      props.editUserName(props.userName)
        .then(() =&gt; {
          props.pushToast({ kind: 'success', message: props.getMessages('editUserNameSuccess') });
        });
      props.setDialogShow('none');
    },
  }),
)(EditUserNameDialog);