# react/jsx-curly-spacing

> Enforce or disallow spaces inside the curly braces of JSX attributes and children

`value={ name }` and `value={name}` mean the same thing. A codebase that mixes them is harder to scan and gets whitespace-only diffs. By default the rule doesn't allow spaces inside the braces of a prop or a spread. It doesn't check children.

`--fix` adds or removes the spaces.

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

Every option, set to its default. The ones that are commented out are unset by default.

```toml bunfig.toml
[lint.rules]
"react/jsx-curly-spacing" = [
  "error",
  "never", # "always" or "never"
  {
    allowMultiline = true,
    # spacing = <object>,
  },
]
```

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

## Examples

Reported:

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

Not reported:

{/* good */}
```jsx
const field = <Input value={name} {...rest} />;

const label = <Label>{ name }</Label>;
```

## Options

The option is `"never"` (default), `"always"`, or an object:

| Option | Default | What it does |
| --- | --- | --- |
| `when` | `"never"` | `"never"` doesn't allow spaces inside the braces. `"always"` requires one on each side. |
| `allowMultiline` | `true` | Allow a line break right after `{` and right before `}`. |
| `spacing.objectLiterals` | same as `when` | `"always"` or `"never"` for braces that hold an object literal, as in `style={{ color }}`. |
| `attributes` | `true` | Check props and spreads. `false` turns that off. An object with the three options above applies to props only. |
| `children` | `false` | Check children. `true` turns that on. An object with the three options above applies to children only. |

After `"always"` or `"never"`, a second object can hold `allowMultiline` and `spacing`.

```toml bunfig.toml
[lint.rules]
"react/jsx-curly-spacing" = ["error", { when = "always", children = true }]
```

With `"always"`:

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

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

With `children` set to `true`, children follow the same setting as props:

{/* bad {"options": [{"children": true}]} */}
```jsx
const label = <Label>{ name }</Label>;
```

With `allowMultiline` set to `false`:

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

`spacing.objectLiterals` lets `{{` and `}}` stay together while other braces get spaces:

{/* good {"options": ["always", {"spacing": {"objectLiterals": "never"}}]} */}
```jsx
const box = <Box style={{ color: "red" }} title={ name } />;
```

## When not to use it

A formatter such as `bun fmt` or Prettier already fixes this spacing.