react/jsx-curly-spacing

Enforce or disallow spaces inside the curly braces of JSX attributes and children

value={ name } and value={name} mean the same thing. A codebase that mixes them is harder to scan and gets whitespace-only diffs. By default the rule doesn't allow spaces inside the braces of a prop or a spread. It doesn't check children.

--fix adds or removes the spaces.

Configure

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-curly-spacing" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

bunfig.toml

[lint.rules]
"react/jsx-curly-spacing" = [
  "error",
  "never", # "always" or "never"
  {
    allowMultiline = true,
    # spacing = <object>,
  },
]

Examples

Reported:

const field = <Input value={ name } { ...rest } />;

Not reported:

const field = <Input value={name} {...rest} />;

const label = <Label>{ name }</Label>;

Options

The option is "never" (default), "always", or an object:

Option	Default	What it does
`when`	`"never"`	`"never"` doesn't allow spaces inside the braces. `"always"` requires one on each side.
`allowMultiline`	`true`	Allow a line break right after `{` and right before `}`.
`spacing.objectLiterals`	same as `when`	`"always"` or `"never"` for braces that hold an object literal, as in `style={{ color }}`.
`attributes`	`true`	Check props and spreads. `false` turns that off. An object with the three options above applies to props only.
`children`	`false`	Check children. `true` turns that on. An object with the three options above applies to children only.

After "always" or "never", a second object can hold allowMultiline and spacing.

bunfig.toml

[lint.rules]
"react/jsx-curly-spacing" = ["error", { when = "always", children = true }]

With "always":

const field = <Input value={name} />;

const field = <Input value={ name } />;

With children set to true, children follow the same setting as props:

const label = <Label>{ name }</Label>;

With allowMultiline set to false:

const field = <Input value={
  name
} />;

spacing.objectLiterals lets {{ and }} stay together while other braces get spaces:

const box = <Box style={{ color: "red" }} title={ name } />;

When not to use it

A formatter such as bun fmt or Prettier already fixes this spacing.