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:
<div>Hello world</div>Examples of correct code for this rule:
<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:
{
"plugins": ["react"],
"rules": {
"react/jsx-no-literals": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/jsx-no-literals": "error",
},
});oxlint --deny react/jsx-no-literals --react-pluginVersion
This rule was added in vnext.