is-from-react
Reports all identifiers initialized from React in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise, leave it off.
Full Name in eslint-plugin-react-debug
react-debug/is-from-reactFeatures
🐞
Rule Details
This rule reports all identifiers initialized from React in JSON format. It tracks named imports, default imports, namespace accesses, and chained member accesses originating from the configured React importSource.
Examples
Named imports from React
// This rule reports named imports that originate from React.
import { useState } from "react";
// ^^^^^^^^
// - [initialized from react] name: 'useState', import source: 'react'.Default import and namespace access
// This rule reports the default React import and member accesses.
import React from "react";
// ^^^^^
// - [initialized from react] name: 'React', import source: 'react'.
const Children = React.Children;
// ^^^^^^^^ ^^^^^ ^^^^^^^^
// | | - [initialized from react] name: 'Children', import source: 'react'.
// | - [initialized from react] name: 'React', import source: 'react'.
// - [initialized from react] name: 'Children', import source: 'react'.Chained member access from React imports
// This rule reports identifiers derived from React through chained access.
const toArray = Children.toArray;
// ^^^^^^^ ^^^^^^^^ ^^^^^^^
// | | - [initialized from react] name: 'toArray', import source: 'react'.
// | - [initialized from react] name: 'Children', import source: 'react'.
// - [initialized from react] name: 'Children', import source: 'react'.Custom React import source
When settings["react-x"].importSource is set to "@pika/react":
// This rule respects the custom importSource setting.
import { useState } from "@pika/react";
// ^^^^^^^^
// - [initialized from react] name: 'useState', import source: '@pika/react'.import React from "@pika/react";
// ^^^^^
// - [initialized from react] name: 'React', import source: '@pika/react'.
const Children = React.Children;
// ^^^^^^^^ ^^^^^ ^^^^^^^^
// | | - [initialized from react] name: 'Children', import source: '@pika/react'.
// | - [initialized from react] name: 'React', import source: '@pika/react'.
// - [initialized from react] name: 'Children', import source: '@pika/react'.const toArray = Children.toArray;
// ^^^^^^^ ^^^^^^^^ ^^^^^^^
// | | - [initialized from react] name: 'toArray', import source: '@pika/react'.
// | - [initialized from react] name: 'Children', import source: '@pika/react'.
// - [initialized from react] name: 'Children', import source: '@pika/react'.Versions
Resources
See Also
react-debug/function-component
Reports all function components in JSON format.react-debug/hook
Reports all React Hooks in JSON format.react-debug/is-from-ref
Reports all identifiers initialized or derived from refs in JSON format.
hook
Reports all React Hooks in JSON format. Useful for debugging. This rule should be used only for debugging purposes; otherwise, leave it off.
is-from-ref
Reports all identifiers initialized or derived from refs in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise, leave it off.