diff --git a/apps/website/content/docs/configurations.mdx b/apps/website/content/docs/configurations.mdx index dde24f638f..3fbe036e2a 100644 --- a/apps/website/content/docs/configurations.mdx +++ b/apps/website/content/docs/configurations.mdx @@ -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. @@ -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); }, []); ``` diff --git a/apps/website/content/docs/configurations.tsx b/apps/website/content/docs/configurations.tsx index 57e26333d8..ad01b67058 100644 --- a/apps/website/content/docs/configurations.tsx +++ b/apps/website/content/docs/configurations.tsx @@ -18,6 +18,15 @@ export function SettingsTypeTable() { description: The source where React is imported from ⤵, default: "react", }, + strictImportCheck: { + type: "boolean", + description: ( + + Check both the sharp and the import to determine if a API is from React before applying the rules. ⤵ + + ), + default: "false", + }, polymorphicPropName: { type: "string", description: ( diff --git a/packages/shared/src/schemas.ts b/packages/shared/src/schemas.ts index 9013256dd4..b36c89bb82 100644 --- a/packages/shared/src/schemas.ts +++ b/packages/shared/src/schemas.ts @@ -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), /**