typescript.react.portability.i18next.useselect-label-not-i18n.useselect-label-not-i18n

profile photo of semgrepsemgrep
Author
unknown
Download Count*
LGPL Commons Clause
License

React useSelect() label is not internationalized - '$LABEL'. You should support different langauges in your website or app with internationalization. Instead, use packages such as i18next to internationalize your elements.

Run Locally

Run in CI

Semgrep CI docs

Defintion

Edit RuleView Source
Open in Playground 
rules:
  - id: useselect-label-not-i18n
    patterns:
      - pattern: useSelect($X1, $X2, '$LABEL', $X4)
      - metavariable-regex:
          metavariable: $LABEL
          regex: (.*[A-Za-z].*)
      - pattern-not: useSelect($X1, $X2, t('...'), $X4)
    message: React useSelect() label is not internationalized - '$LABEL'. You should
      support different langauges in your website or app with
      internationalization. Instead, use packages such as `i18next` to
      internationalize your elements.
    languages:
      - typescript
      - javascript
    severity: WARNING
    metadata:
      category: portability
      technology:
        - react
        - mui
        - i18next
      references:
        - https://www.notion.so/hendyirawan/Internationalization-Localization-Policy-318c21674e5f44c48d6f136a6eb2e024
        - https://react.i18next.com/
      license: Commons Clause License Condition v1.0[LGPL-2.1-only]

Examples

useselect-label-not-i18n.tsx

const {
  FormSelect: Amount,
  state: amount,
  setState: setAmount,
// ruleid: useselect-label-not-i18n
} = useSelect('', [{ name: '10' }, { name: '50' }, { name: '100' }], 'Gift amount', '47%');

const {
  FormSelect: Currency,
  state: currency,
  setState: setCurrency,
// ok: useselect-label-not-i18n
} = useSelect(
  '',
  [
    { name: 'EUR', fullName: 'Euro', symbol: '€' },
    { name: 'USD', fullName: 'US Dollars', symbol: '$' },
  ],
  t('gift.currency'),
  '47%',
);
// ok: useselect-label-not-i18n
useSelect(
  '',
  [
    { name: 'EUR', fullName: 'Euro', symbol: '€' },
    { name: 'USD', fullName: 'US Dollars', symbol: '$' },
  ],
  '',
  '47%',
);
// ok: useselect-label-not-i18n
useSelect(
  '',
  [
    { name: 'EUR', fullName: 'Euro', symbol: '€' },
    { name: 'USD', fullName: 'US Dollars', symbol: '$' },
  ],
  '500.23',
  '47%',
);
// ok: useselect-label-not-i18n
useSelect(
  '',
  [
    { name: 'EUR', fullName: 'Euro', symbol: '€' },
    { name: 'USD', fullName: 'US Dollars', symbol: '$' },
  ],
  '500,23',
  '47%',
);
// ok: useselect-label-not-i18n
useSelect(
  '',
  [
    { name: 'EUR', fullName: 'Euro', symbol: '€' },
    { name: 'USD', fullName: 'US Dollars', symbol: '$' },
  ],
  '500-23',
  '47%',
);
// ok: useselect-label-not-i18n
useSelect(
  '',
  [
    { name: 'EUR', fullName: 'Euro', symbol: '€' },
    { name: 'USD', fullName: 'US Dollars', symbol: '$' },
  ],
  '30%',
  '47%',
);