Skip to content
← Back to rules

react/jsx-no-literals Restriction

What it does ​

Disallows usage of unwrapped string literals inside JSX, such as text children of a JSX element or string-valued props.

Why is this bad? ​

Hard-coded string literals in JSX make it difficult to support internationalization (i18n). By requiring literals to be wrapped in a JSX expression container (for example, a call to a translation function), this rule helps ensure all user-facing text flows through a single, auditable mechanism rather than being scattered as inline strings throughout the markup.

Examples ​

Examples of incorrect code for this rule:

jsx
<div>Hello world</div>

Examples of correct code for this rule:

jsx
<div>{"Hello world"}</div>

Configuration ​

The options shared between the top-level config and each elementOverrides entry.

This rule accepts a configuration object with the following properties:

allowedStrings ​

type: string[]

default: []

An array of unique string values that would otherwise warn, but will be ignored.

elementOverrides ​

type: Record<string, object>

An object where the keys are the element names and the values are objects with the same options as above. This allows you to specify different options for different elements.

ignoreProps ​

type: boolean

default: false

(default: false) - When true the rule ignores literals used in props, wrapped or unwrapped.

noAttributeStrings ​

type: boolean

default: false

(default: false) - Enforces no string literals used in attributes when set to true.

noStrings ​

type: boolean

default: false

(default: false) - Enforces no string literals used as children, wrapped or unwrapped.

restrictedAttributes ​

type: string[]

default: []

An array of unique attribute names where string literals should be restricted. Only the specified attributes will be checked for string literals when this option is used. Note: When noAttributeStrings is true, this option is ignored at the root level.

How to use ​

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-literals": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-no-literals": "error",
  },
});
bash
oxlint --deny react/jsx-no-literals --react-plugin

Version ​

This rule was added in v1.70.0.

References ​