React Intl Snippets
Provides essential snippets for react-intl
Commands
-
rip
=><IntlProvider locale={} messages={}> APP </IntlProvider>
-
rial
=>import {addLocaleData} from 'react-intl'; import |LocaleData from 'react-intl/locale-data/[sv]'; addLocaleData(LocaleData);
-
rild
=>import |LocaleData from 'react-intl/locale-data/[sv]';
-
rif
=>import { FormattedMessage } from 'react-intl';
-
rinj
=>import { injectIntl, intlShape } from 'react-intl';
-
ridm
=>import { defineMessages } from 'react-intl'; export default defineMessages({ descriptor: { id: '', defaultMessage: '', }, ...more });
-
rifm
=><FormattedMessage id='requiredProp' description='optionalProp' defaultMessage='requiredProp' values={{ key:'value' }} />
-
rifmt
=><FormattedMessage tagName="" id='requiredProp' description='optionalProp' defaultMessage='requiredProp' values={{ key:'value' }} />
-
rifmdm
=><FormattedMessage {...descriptor} />
-
rifmdmt
=><FormattedMessage tagName="" {...descriptor} />
-
rifmcb
=><FormattedMessage {...descriptor} > { formattedMessage => ( <[reactElementOrTagName]> {formattedMessage} </|> ) } </FormattedMessage>
-
rinjrc
=>import React, { PropTypes } from 'react'; import { injectIntl, intlShape } from 'react-intl'; class [intlInjectComponent] extends React.Component { /* Life cycle methods */ render() { const { intl } = this.props; return ( <div> {intl.formatMessage({id:'', defaultMessage: ''})} {intl.formatMessage(descriptor)} </div> ); } } |.propTypes = { intl: intlShape.isRequired, } export default injectIntl(|);
Pro Tip:
ri
(react-intl) root prefix and all shortcuts begins with itfm
: FormattedMessage (rifm
)dm
: for defaultMessages (rifmdm
)t
: withtagName
prop (rifmdmt
)
t
: withtagName
prop (rifmt
)
nj
: injectIntl import (rinj
)rc
: injectIntl wrapped React.Component (rinjrc
)