# react/jsx-max-props-per-line

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

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.

{/* 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-max-props-per-line" = "error" # or "warn"
```

Every option, set to its default:

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

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

## Examples

Reported:

{/* bad */}
```jsx
const field = <Input name="email" value={email} />;
```

Not reported:

{/* good */}
```jsx
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. |

{/* good {"options": [{"maximum": 2}]} */}
```jsx
const field = <Input name="email" value={email} />;
```

With `when` set to `"multiline"`:

{/* good {"options": [{"when": "multiline"}]} */}
```jsx
const field = <Input name="email" value={email} />;
```

{/* bad {"options": [{"when": "multiline"}]} */}
```jsx
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`.

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

{/* good {"options": [{"maximum": {"single": 3, "multi": 1}}]} */}
```jsx
const short = <Input name="email" value={email} required />;

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

{/* good {"options": [{"maximum": {"multi": 1}}]} */}
```jsx
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.