# react/sort-prop-types

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

In a long `propTypes` 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.

`--fix` sorts the keys.

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

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/sort-prop-types" = ["error", {
  ignoreCase = false,
  requiredFirst = false,
  callbacksLast = false,
  noSortAlphabetically = false,
  sortShapeProp = false,
  checkTypes = false,
}]
```

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

## Examples

Reported:

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

Button.propTypes = {
  size: PropTypes.string,
  label: PropTypes.string,
};
```

Not reported:

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

Button.propTypes = {
  label: PropTypes.string,
  size: PropTypes.string,
};
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `ignoreCase` | `false` | Ignore case when comparing the keys. |
| `requiredFirst` | `false` | Require props marked `.isRequired` to come before the others. |
| `callbacksLast` | `false` | Require props named like `onChange` to come after the others. |
| `noSortAlphabetically` | `false` | Don't check the alphabetical order. Use it with `requiredFirst` or `callbacksLast`. |
| `sortShapeProp` | `false` | Also check the keys inside `PropTypes.shape({ ... })`. |
| `checkTypes` | `false` | Also check the props type of a function component, written inline or as a `type` alias. An `interface` isn't checked. |

With `requiredFirst` and `callbacksLast`, each group is sorted alphabetically on its own:

{/* good {"options": [{"requiredFirst": true, "callbacksLast": true}]} */}
```jsx
Button.propTypes = {
  size: PropTypes.string.isRequired,
  label: PropTypes.string,
  theme: PropTypes.string,
  onClick: PropTypes.func,
};
```

With `requiredFirst`, this is reported, because `size` is required:

{/* bad {"options": [{"requiredFirst": true}]} */}
```jsx
Button.propTypes = {
  label: PropTypes.string,
  size: PropTypes.string.isRequired,
};
```

With `callbacksLast`, this is reported, because `onClick` isn't last:

{/* bad {"options": [{"callbacksLast": true}]} */}
```jsx
Button.propTypes = {
  label: PropTypes.string,
  onClick: PropTypes.func,
  size: PropTypes.string,
};
```

With `noSortAlphabetically`, only the groups matter:

{/* good {"options": [{"callbacksLast": true, "noSortAlphabetically": true}]} */}
```jsx
Button.propTypes = {
  size: PropTypes.string,
  label: PropTypes.string,
  onClick: PropTypes.func,
};
```

With `sortShapeProp`, this is reported:

{/* bad {"options": [{"sortShapeProp": true}]} */}
```jsx
Profile.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    email: PropTypes.string,
  }),
};
```

With `checkTypes`, this is reported:

{/* bad {"options": [{"checkTypes": true}]} */}
```tsx
type ButtonProps = {
  size: string;
  label: string;
};

function Button(props: ButtonProps) {
  return <button className={props.size}>{props.label}</button>;
}
```