Skip to content

Commit a6d4df5

Browse files
committed
Add docs for 'first' prop indent
1 parent 181060f commit a6d4df5

File tree

1 file changed

+25
-2
lines changed

1 file changed

+25
-2
lines changed

docs/rules/jsx-indent-props.md

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,12 @@ firstName="John"
2929

3030
## Rule Options
3131

32-
It takes an option as the second parameter which can be `"tab"` for tab-based indentation or a positive number for space indentations.
32+
It takes an option as the second parameter which can be `"tab"` for tab-based indentation, a positive number for space indentations or `"first"` for aligning the first prop for each line with the tag's first prop.
33+
Note that using the `"first"` option allows very inconsistent indentation unless you also enable a rule that enforces the position of the first prop.
3334

3435
```js
3536
...
36-
"react/jsx-indent-props": [<enabled>, 'tab'|<number>]
37+
"react/jsx-indent-props": [<enabled>, 'tab'|<number>|'first']
3738
...
3839
```
3940

@@ -51,6 +52,13 @@ The following patterns are considered warnings:
5152
<Hello
5253
firstName="John"
5354
/>
55+
56+
// aligned with first prop
57+
// [2, 'first']
58+
<Hello
59+
firstName="John"
60+
lastName="Doe"
61+
/>
5462
```
5563

5664
The following patterns are **not** warnings:
@@ -77,6 +85,21 @@ The following patterns are **not** warnings:
7785
<Hello
7886
firstName="John"
7987
/>
88+
89+
// aligned with first prop
90+
// [2, 'first']
91+
<Hello
92+
firstName="John"
93+
lastName="Doe"
94+
/>
95+
96+
<Hello
97+
firstName="John"
98+
lastName="Doe"
99+
/>
100+
101+
<Hello firstName="Jane"
102+
lastName="Doe" />
80103
```
81104

82105
## When not to use

0 commit comments

Comments
 (0)