react/jsx-max-props-per-line

Enforce a maximum number of props on one line of a JSX tag

fixable

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:

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

Every option, set to its default:

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

Examples#

example.jsx1 problem
const field = <Input name="email" value={email} />;
example.jsxNo problems
const field = (
  <Input
    name="email"
    value={email}
  />
);

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

Options#

OptionDefaultWhat it does
maximum1How many props a line can have.
when"always"With "multiline", only check tags that take several lines.
example.jsxwith { "maximum": 2 }No problems
const field = <Input name="email" value={email} />;

With when set to "multiline":

example.jsxwith { "when": "multiline" }No problems
const field = <Input name="email" value={email} />;
example.jsxwith { "when": "multiline" }1 problem
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.

bunfig.toml
[lint.rules]
"react/jsx-max-props-per-line" = ["error", {
  maximum = { single = 3, multi = 1 },
}]
example.jsxwith { "maximum": { "single": 3, "multi": 1 } }No problems
const short = <Input name="email" value={email} required />;

const long = (
  <Input
    name="email"
    value={email}
  />
);
example.jsxwith { "maximum": { "multi": 1 } }No problems
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.