react/jsx-max-props-per-line

A long row of props is hard to scan, and changing one of them marks the whole line in a diff. By default the rule allows one prop per line.

--fix puts the extra props on new lines.

Configure

Off by default. To turn it on:

[lint.rules]
"react/jsx-max-props-per-line" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/jsx-max-props-per-line" = ["error", {
  maximum = 1,
  when = "always", # "always" or "multiline"
}]

Examples

Reported:

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

Not reported:

const field = (
  <Input
    name="email"
    value={email}
  />
);

const short = <Input name="email" />;

Options

Option	Default	What it does
maximum	1	How many props a line can have.
when	"always"	With "multiline", only check tags that take several lines.

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

With when set to "multiline":

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

const field = (
  <Input
    name="email" value={email}
  />
);

maximum can also be an object. single is the limit for tags on one line, and multi is the limit for tags that take several lines. If you leave a limit out, it isn't checked. You can't combine this form with when.

[lint.rules]
"react/jsx-max-props-per-line" = ["error", {
  maximum = { single = 3, multi = 1 },
}]

const short = <Input name="email" value={email} required />;

const long = (
  <Input
    name="email"
    value={email}
  />
);

const short = <Input name="email" value={email} required disabled />;

When not to use it

A formatter such as bun fmt or Prettier already decides where props break. Use one or the other.