Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions apps/website/content/docs/configurations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,27 @@ This allows to specify a custom import location for React when not using the off

For example, if you are using `@pika/react` instead of `react`, you can set the `importSource` to `@pika/react`:

```tsx
```ts
import React from "@pika/react";
```

### `strictImportCheck`

Check both the sharp and the import to determine if a API is from React before applying the rules.

This can prevent false positives when using a irrelevant third-party library that has similar APIs to React.

For example, if you set the `strictImportCheck` to `true`, then the `memo` function from `irrelevant-library` will not be recognized as React's `memo`:

```ts
import { memo } from "irrelevant-library";

const NonComponentFunction = memo(() => {
// ^^^^
// - This will not be recognized as React's memo
});
```

### `polymorphicPropName`

You can optionally use the `polymorphicPropName` setting to define the prop your code uses to create polymorphic components. This setting will be used determine the element type in rules that require semantic context.
Expand Down Expand Up @@ -115,19 +132,19 @@ For example, if you set the `additionalHooks` to:

then the React Hook call:

```tsx
```ts
useIsomorphicLayoutEffect(() => { setCount(count => count + 1); }, []);
```

will be evaluated as:

```tsx
```ts
useEffect(() => { setCount(count => count + 1); }, []);
```

and:

```tsx
```ts
useLayoutEffect(() => { setCount(count => count + 1); }, []);
```

Expand Down
9 changes: 9 additions & 0 deletions apps/website/content/docs/configurations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ export function SettingsTypeTable() {
description: <Link href="#importsource">The source where React is imported from ⤵</Link>,
default: "react",
},
strictImportCheck: {
type: "boolean",
description: (
<Link href="#strictimportcheck">
Check both the sharp and the import to determine if a API is from React before applying the rules. ⤵
</Link>
),
default: "false",
},
polymorphicPropName: {
type: "string",
description: (
Expand Down
4 changes: 3 additions & 1 deletion packages/shared/src/schemas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,9 @@ export const ESLintReactSettingsSchema = object({
*/
strict: optional(boolean(), false),
/**
* @internal
* Check both the sharp and the import to determine if a API is from React.
* @description This can prevent false positives when using a irrelevant third-party library that has similar APIs to React.
* @default `false`
*/
strictImportCheck: optional(boolean(), false),
/**
Expand Down