# react/jsx-no-literals

> Disallow text written directly in JSX

Text typed straight into JSX never goes through your translation function, so every user sees it in the language you wrote it in.

By default the rule only reports bare text between tags. It treats a string in braces, such as `{"Bun"}`, as written on purpose. The `noStrings` option reports those too.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/jsx-no-literals" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-no-literals" = ["error", {
  noStrings = false,
  ignoreProps = false,
  noAttributeStrings = false,
  allowedStrings = [], # list of strings
  elementOverrides = {},
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
function Greeting() {
  return <p>Welcome back</p>;
}
```

Not reported:

{/* good */}
```jsx
function Greeting({ t }) {
  return <p>{t("greeting.welcome")}</p>;
}

const brand = <strong>{"Bun"}</strong>;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `noStrings` | `false` | Also report strings and template literals in braces, and strings in props. |
| `ignoreProps` | `false` | Never report anything in props. |
| `noAttributeStrings` | `false` | Also report props with a plain string value, such as `alt="Logo"`. |
| `allowedStrings` | `[]` | Strings that are never reported. Spaces around the text don't count. |
| `elementOverrides` | `{}` | Different options for some components, by name. |
| `restrictedAttributes` | `[]` | Only for an oxlint config. Props that can't have a plain string value, even with `ignoreProps`. `bunfig.toml` rejects this option. |

With `noStrings`, braces don't help:

{/* bad {"options": [{"noStrings": true}], "count": 2} */}
```jsx
function Greeting() {
  return <p title="Greeting">{"Welcome back"}</p>;
}
```

{/* good {"options": [{"noStrings": true, "ignoreProps": true}]} */}
```jsx
function Greeting({ t }) {
  return <p title="Greeting">{t("greeting.welcome")}</p>;
}
```

`noAttributeStrings` looks at props without the rest of `noStrings`:

{/* bad {"options": [{"noAttributeStrings": true}]} */}
```jsx
const logo = <img src={logoUrl} alt="Company logo" />;
```

`allowedStrings` is for punctuation and other text that's the same in every language:

{/* good {"options": [{"allowedStrings": ["|"]}]} */}
```jsx
const links = (
  <nav>
    {home} | {about}
  </nav>
);
```

### `elementOverrides`

The keys are component names, which start with a capital letter. Each value takes the options above, which replace the top-level ones for that component, plus two more:

| Option | Default | What it does |
| --- | --- | --- |
| `allowElement` | `false` | Allow text in this component. |
| `applyToNestedElements` | `true` | Use these options for the elements inside the component too. |

{/* good {"options": [{"elementOverrides": {"Trans": {"allowElement": true}}}]} */}
```jsx
const message = (
  <Trans>
    Welcome <b>back</b>
  </Trans>
);
```

{/* bad {"options": [{"elementOverrides": {"Trans": {"allowElement": true, "applyToNestedElements": false}}}], "count": 1} */}
```jsx
const message = (
  <Trans>
    Welcome <b>back</b>
  </Trans>
);
```

An empty override resets a component to the defaults, so here it's checked without `noStrings`:

{/* good {"options": [{"noStrings": true, "elementOverrides": {"Code": {}}}]} */}
```jsx
const command = <Code>{"bun lint"}</Code>;
```

## When not to use it

If your app is in one language and stays that way, text in JSX is fine.