# react/sort-default-props

> Require the keys of `defaultProps` to be sorted alphabetically

In a long `defaultProps` object, a fixed order makes props quick to find and duplicates easy to spot.

Capital letters sort before lowercase ones. After a spread, sorting starts over.

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

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/sort-default-props" = ["error", {
  ignoreCase = false,
}]
```

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

## Examples

Reported:

{/* bad */}
```jsx
function Button({ label, size }) {
  return <button className={size}>{label}</button>;
}

Button.defaultProps = {
  size: "medium",
  label: "OK",
};
```

Not reported:

{/* good */}
```jsx
function Button({ label, size }) {
  return <button className={size}>{label}</button>;
}

Button.defaultProps = {
  label: "OK",
  size: "medium",
};
```

`label` comes after a spread here, so it isn't compared with `size`:

{/* good */}
```jsx
class Button extends React.Component {
  static defaultProps = {
    size: "medium",
    ...shared,
    label: "OK",
  };
}
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `ignoreCase` | `false` | Ignore case when comparing the keys. |

By default this is reported, because `I` sorts before `a`:

{/* bad */}
```jsx
Button.defaultProps = {
  ariaLabel: "",
  Icon: null,
};
```

With `ignoreCase: true` it isn't:

{/* good {"options": [{"ignoreCase": true}]} */}
```jsx
Button.defaultProps = {
  ariaLabel: "",
  Icon: null,
};
```