# react/jsx-curly-newline

> Enforce consistent line breaks inside the curly braces of JSX expressions

A JSX expression can have a line break after its `{` and before its `}`. With a break on one side only, the braces no longer line up and the expression is harder to pick out. By default this rule wants a break on both sides or on neither.

It checks the braces around attribute values and children.

`--fix` adds or removes the line breaks.

{/* 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-curly-newline" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-curly-newline" = ["error", "consistent"] # "consistent" or "never"
```

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

## Examples

Reported:

{/* bad */}
```jsx
const list = (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)
    }
  </ul>
);
```

Not reported:

{/* good */}
```jsx
const list = (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
);

const same = (
  <ul>
    {
      items.map(item => <li key={item.id}>{item.name}</li>)
    }
  </ul>
);
```

## Options

| Option | What it does |
| --- | --- |
| `"consistent"` (default) | A line break on both sides or on neither. |
| `"never"` | No line break after `{` or before `}`. |

{/* bad {"options": ["never"], "count": 2} */}
```jsx
const title = (
  <h1>
    {
      user.name
    }
  </h1>
);
```

The option can also be an object, with one setting for expressions that fit on one line and one for expressions that span several lines:

| Option | Default | What it does |
| --- | --- | --- |
| `singleline` | `"consistent"` | `"consistent"`, `"require"` (a break on both sides), or `"forbid"` (no break). |
| `multiline` | `"consistent"` | The same three values. |

{/* bad {"options": [{"multiline": "require", "singleline": "forbid"}], "count": 2} */}
```jsx
const menu = (
  <nav>
    {isOpen && (
      <Menu />
    )}
  </nav>
);
```

{/* good {"options": [{"multiline": "require", "singleline": "forbid"}]} */}
```jsx
const menu = (
  <nav title={title}>
    {
      isOpen && (
        <Menu />
      )
    }
  </nav>
);
```

## When not to use it

A formatter such as `bun fmt` or Prettier already decides where these line breaks go.