Skip to content

Commit 6778d8f

Browse files
committed
chore: update readme with options documentation
1 parent da1378e commit 6778d8f

File tree

1 file changed

+33
-3
lines changed

1 file changed

+33
-3
lines changed

readme.md

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,17 @@ This rule checks that conditionals expressions or logical expression match a cer
1515

1616
### Options
1717

18-
This rule accepts an argument that can be one of two possible values:
18+
This rule accepts as a first argument one of these two possible values:
1919

2020
- `prefer-ternary`
2121
- `prefer-and-operator`
2222

2323
The default value is `prefer-ternary`.
2424

25+
It also accepts a second argument defining the options of the rule. Options are:
26+
27+
- `exceptNotNullishAlternates`: this option is taken into account only on `prefer-and-operator` mode
28+
2529
### `prefer-ternary`
2630

2731
This option will check for logical expressions inside JSX code and if it finds a logical expression that follows the following shape:
@@ -106,13 +110,37 @@ function Component({ propA }) {
106110
This option will check for conditional expressions inside JSX code and if it finds a conditional expression that follows the following shape:
107111

108112
```jsx
109-
<>{identifier ? JSXElement | JSXFragment : null}</>
113+
<>{identifier ? JSXElement | JSXFragment : JSXElement | JSXFragment}</>
110114
```
111115

112116
And this would be auto fixable outputing the following code
113117

114118
```jsx
115-
<>{identifier && JSXElement | JSXFragment}</>
119+
<>
120+
{identifier && JSXElement | JSXFragment}
121+
{!identifier && JSXElement | JSXFragment}
122+
</>
123+
```
124+
125+
Being two logical expressions where the first tests the condition and renders the consequent of the conditional expression and the second negates
126+
the test and renders the alternate.
127+
128+
If a conditional expression is preferred over a logical expression when the alternate is not `null` or `undefined` you can tell the rule your
129+
preferences by using the option `exceptNotNullishAlternates` as a second argument in the rule declaration on `.eslintrc`
130+
131+
Example:
132+
133+
```javascript
134+
// .eslintrc.js
135+
module.exports = {
136+
extends: [...],
137+
plugins: [..., 'jsx-conditional'],
138+
rules: {
139+
...
140+
'jsx-conditional/jsx-conditional': ['error', 'prefer-and-operator', { exceptNotNullishAlternates: true }]
141+
...
142+
}
143+
}
116144
```
117145

118146
### Examples
@@ -159,6 +187,8 @@ function Component({ propA }) {
159187
}
160188
```
161189

190+
This can be valid if you prefer by indicating it in the options argument `{ exceptNotNullishAlternates: true }`, but without it the following code would be invalid.
191+
162192
```jsx
163193
function Component({ propA }) {
164194
return <>{propA ? <span>Hello</span> : <span>Hello</span>}</>;

0 commit comments

Comments
 (0)