# react/jsx-first-prop-new-line

> Enforce the position of the first prop of a JSX element

When a tag takes several lines and its first prop stays next to the tag name, that prop is easy to miss and the props don't line up. By default the rule reports this for a tag that has more than one prop.

`--fix` moves the first prop.

{/* 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-first-prop-new-line" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
# "always", "never", "multiline", "multiline-multiprop" or "multiprop"
"react/jsx-first-prop-new-line" = ["error", "multiline-multiprop"]
```

{/* 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" value={email} />;
```

## Options

| Option | The first prop goes on a new line |
| --- | --- |
| `"multiline-multiprop"` (default) | If the tag takes several lines and has more than one prop. |
| `"multiline"` | If the tag takes several lines. |
| `"multiprop"` | If the tag has more than one prop. With one prop, it must be on the same line as the tag name. |
| `"always"` | Always. |
| `"never"` | Never. It must be on the same line as the tag name. |

A single prop that takes several lines is reported with `"multiline"`, but not with the default:

{/* bad {"options": ["multiline"]} */}
```jsx
const box = <Box style={{
  color: "red",
}} />;
```

{/* good */}
```jsx
const box = <Box style={{
  color: "red",
}} />;
```

With `"multiprop"`:

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

With `"never"`:

{/* bad {"options": ["never"]} */}
```jsx
const field = (
  <Input
    name="email"
    value={email}
  />
);
```

## When not to use it

A formatter such as `bun fmt` or Prettier already decides where the first prop goes.