# react/jsx-sort-props

> Require JSX props to be sorted alphabetically

On a tag with many props, a fixed order makes a prop quick to find and keeps two people from adding the same one in different places.

Capital letters sort before lowercase ones. A spread splits the props into groups, and each group is sorted separately, because moving a prop across a spread can change which value wins.

`--fix` reorders the props.

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

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-sort-props" = ["error", {
  ignoreCase = false,
  callbacksLast = false,
  shorthandFirst = false,
  shorthandLast = false,
  multiline = "ignore", # "ignore", "first" or "last"
  reservedFirst = false,
  noSortAlphabetically = false,
  locale = "auto",
}]
```

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

## Examples

Reported:

{/* bad */}
```jsx
const button = <Button type="submit" disabled />;
```

Not reported:

{/* good */}
```jsx
const button = <Button disabled type="submit" />;

const link = <Link to="/home" {...rest} replace />;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `ignoreCase` | `false` | Ignore case when comparing names. |
| `callbacksLast` | `false` | Handlers such as `onClick` come after all other props. |
| `shorthandFirst` | `false` | Props without a value, such as `disabled`, come first. |
| `shorthandLast` | `false` | Props without a value come last. |
| `multiline` | `"ignore"` | Where props that span several lines go: `"first"` or `"last"`. |
| `reservedFirst` | `false` | `true` puts `children`, `key`, `ref` and, on HTML elements, `dangerouslySetInnerHTML` first. A list of some of these names puts only those first. |
| `noSortAlphabetically` | `false` | Only check the groups from the options above, not the alphabetical order. |
| `locale` | `"auto"` | With a locale such as `"en"`, compare names the way `localeCompare` does. |

Within each group the props are still sorted alphabetically, unless `noSortAlphabetically` is set.

{/* bad {"options": [{"callbacksLast": true}]} */}
```jsx
const button = <Button onClick={save} type="submit" />;
```

{/* good {"options": [{"callbacksLast": true}]} */}
```jsx
const button = <Button type="submit" onClick={save} />;
```

{/* good {"options": [{"shorthandFirst": true}]} */}
```jsx
const input = <Input required name="email" />;
```

{/* good {"options": [{"shorthandLast": true}]} */}
```jsx
const input = <Input type="email" autoFocus />;
```

{/* good {"options": [{"multiline": "last"}]} */}
```jsx
const card = (
  <Card
    title="Profile"
    style={{
      margin: 0,
    }}
  />
);
```

{/* good {"options": [{"reservedFirst": true}]} */}
```jsx
const row = <Row key={item.id} active />;
```

{/* good {"options": [{"callbacksLast": true, "noSortAlphabetically": true}]} */}
```jsx
const button = <Button type="submit" disabled onClick={save} />;
```

{/* bad */}
```jsx
const icon = <Toolbar align="left" Icon={Star} />;
```

{/* good {"options": [{"ignoreCase": true}]} */}
```jsx
const icon = <Toolbar align="left" Icon={Star} />;
```

{/* good {"options": [{"locale": "en"}]} */}
```jsx
const icon = <Toolbar align="left" Icon={Star} />;
```