How to use rtl-detect - 10 common examples

export function loadTranslations(store, locale, defaultTranslations = {}) {
  const parentLocale = locale.split('-')[0];

  // react-intl provides things like pt-BR.
  // lokalise provides things like pt_BR.
  // so we have to translate '-' to '_' because the translation libraries
  // don't know how to talk to each other. sheesh.
  const region = locale.replace('-', '_');

  // Update dir- and lang-attributes on the HTML element
  // when the locale changes
  document.documentElement.setAttribute('lang', parentLocale);
  document.documentElement.setAttribute('dir', rtlDetect.getLangDir(locale));

  // Set locale for Moment.js (en is not importable as it is not stored separately)
  if (parentLocale === 'en') moment.locale(parentLocale);
  else {
    import(`moment/locale/${parentLocale}`).then(() => {
      moment.locale(parentLocale);
    }).catch(e => {
      // eslint-disable-next-line no-console
      console.error(`Error loading locale ${parentLocale} for Moment.js`, e);
    });
  }

  return import(`react-intl/locale-data/${parentLocale}`)
    .then(intlData => addLocaleData(intlData.default || intlData))
    // fetch the region-specific translations, e.g. pt-BR, if available.
    // fall back to the generic locale, e.g. pt, if not available.

render() {
    if (!this.state.sessionStarted) {
      return null;
    }

    const isRtl = rtlDetect.isRtlLang(this.props.intl.locale);

    const { children } = this.props;
    const routeSlug = HomeComponent.routeSlug(children);
    const muiThemeWithRtl = getMuiTheme(merge(
      muiThemeWithoutRtl,
      { isRtl },
    ));
    const muiThemeNext = createMuiTheme(muiThemeV1);

    let message = null;
    if (this.state.error) {
      ({ message } = this.state);

      // TODO Don't parse error messages because they may be l10n'd - use error codes instead.
      if (!message && /^[^/]+\/join$/.test(children.props.route.path)) {
        message = this.props.intl.formatMessage(messages.needRegister);

render() {
    const { team } = this.props;
    const teamUrl = `${window.location.protocol}//${config.selfHost}/${team.slug}`;
    const joinUrl = `${teamUrl}/join`;
    const { locale } = this.props.intl;
    const isRtl = rtlDetect.isRtlLang(locale);
    const fromDirection = isRtl ? 'right' : 'left';
    const toDirection = isRtl ? 'left' : 'right';

    // TODO Render SVG via react, eg:
    // https://gist.github.com/kevinweber/3c519c32db6c976e9cbb5565dc3822f1
    // CGB 2017-6-29
    const teamInviteSvg = '<svg viewBox="0 0 24 24" height="24" width="24" opacity="0.2" fill="#000000" xmlns="http://www.w3.org/2000/svg"><path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"></path></svg>';

    const StyledMdCard = styled(Card)`
      background-color: ${checkBlue} !important;
      margin-bottom: ${units(2)};
      padding-top: 0;
      p, a {
        color: ${white} !important;
      }
    `;

function rtlClass(language_code) {
  return (rtlDetect.isRtlLang(language_code)) ? 'translation__rtl' : 'translation__ltr';
}

render() {
    const token = UserPasswordChange.getQueryStringValue('reset_password_token');
    return (
      
        
          { this.state.showConfirmDialog ?
            
              } />
              
                
              
              
                }
                  primary
                  onClick={this.handleSignIn.bind(this)}
                />

}, (err, result) => {
      resolve(rtlDetect.isRtlLang(result.languages[0].code))
    })
  })

render() {
    const { team } = this.props;
    const { action } = this.props.route;

    const isEditing = (action === 'edit') && can(team.permissions, 'update Team');
    const isSettings = (action === 'settings') && can(team.permissions, 'update Team');
    const isReadOnly = (action === 'settings') && can(team.permissions, 'read Team');

    const isRtl = rtlDetect.isRtlLang(this.props.intl.locale);

    const direction = {
      from: isRtl ? 'right' : 'left',
      to: isRtl ? 'left' : 'right',
    };

    const context = new CheckContext(this).getContextStore();

    const TeamPageContent = (

render() {
    const { media, intl: { locale } } = this.props;
    const data = media.metadata;
    const context = this.getContext();
    const isRtl = rtlDetect.isRtlLang(locale);
    const fromDirection = isRtl ? 'right' : 'left';

    const byUser = media.user &&
      media.user.source &&
      media.user.source.dbid &&
      media.user.name !== 'Pender' ? (
        }>
                
                  {media.user.name}

const UserInfo = (props) => {
  if (props.user.source === null) return null;

  return (
    
      
        
      

      
        <div>
          
            {props.user.name}
          
          
            <p>
              </p></div>

isRtl = () => {
		const { params, serverLanguageTag } = this.props
		const languageTag = params.lang || serverLanguageTag || 'en'
		return rtlDetect.isRtlLang(languageTag)
	}