https://github.com/azer/react-analyzer
https://github.com/azer/react-analyzer
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/azer/react-analyzer
- Owner: azer
- Created: 2024-09-04T18:58:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-10T08:05:49.000Z (about 1 year ago)
- Last Synced: 2025-04-15T18:50:49.916Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://azer.github.io/react-analyzer/
- Size: 933 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-analyzer
Extract structured information about React components and their props through AST parsing. See also: [react-analyzer-mcp](https://github.com/azer/react-analyzer-mcp)
**Ideal for:**
* Feeding high level codebase structure to LLMs
* Building developer tools / visual component editors / component catalogs (e.g storybooks)
* Performing static analysis
* Documentation generation
**Included:**
- Supports JSX and TSX files
- Extracts component names, props, and their types
- Supports complex TypeScript types
- Handles React.FC, React.memo, and React.forwardRef
- Detects default props (`({ items = [] })` and prop types (`component.propTypes =`)
- Processes generic types and utility types
**Demo:**
[](https://x.com/azerkoculu/status/1910013631766450294)
**Scope:**
Focused on React component analysis but internally scans all variables, functions, interfaces in given files. Can be extended for other frameworks, etc.
## Install
```bash
npm install azer/react-analyzer
```
Compile:
```bash
npm run build
```
Run tests:
```bash
npm run test
```
## Usage
```js
import { analyzeReactFile } from 'react-analyzer';
// Analyze a React file
const result = analyzeReactFile('MyComponent.tsx', sourceCode);
```
## Examples
### Simple JSX Component
```ts
export function HelloWorld(props) {
return
{props.user}: {props.message}
}
```
Analysis result:
```ts
{
type: 'jsx',
filename: 'HelloWorld.jsx',
components: [{
name: 'HelloWorld',
props: {
message: { type: 'unknown', optional: false },
user: { type: 'unknown', optional: false }
}
}]
}
```
### Simple TSX Component
```tsx
interface Props {
name: string;
age: number;
isActive?: boolean;
}
export const MyComponent = ({ name, age, isActive }: Props) => {
return
{name}: {age};
};
const Foo = MyComponent
const Bar = Foo
export { Bar }
```
Analysis result:
```tsx
{
type: 'tsx',
filename: 'MyComponent.tsx',
components: [{
name: 'MyComponent',
props: {
name: { type: 'string', optional: false },
age: { type: 'number', optional: false },
isActive: { type: 'boolean', optional: true },
},
},
{
name: 'Bar',
props: {
name: { type: 'string', optional: false },
age: { type: 'number', optional: false },
isActive: { type: 'boolean', optional: true },
},
}]
}
```
### Complex TSX Component
```tsx
interface Item {
id: string;
name: string;
}
interface ComplexWrappedComponentProps {
items: Item[];
onItemSelect: (item: Item) => void;
initialCount?: number;
}
const ComplexWrappedComponent: React.FC = React.memo(({
items,
onItemSelect,
initialCount = 0
}) => {
return (
Selected: {initialCount}
{items.map((item) => (
- onItemSelect(item)}>
{item.name}
))}
);
});
export default ComplexWrappedComponent;
```
Analysis result:
```tsx
{
type: 'tsx',
filename: 'ComplexComponent.tsx',
components: [{
name: 'ComplexWrappedComponent',
props: {
items: {
type: 'array',
optional: false,
elementType: {
type: 'object',
props: {
id: { type: 'string', optional: false },
name: { type: 'string', optional: false }
},
typeName: 'Item'
}
},
onItemSelect: {
type: 'function',
optional: false,
parameters: [{
type: 'object',
props: {
id: { type: 'string', optional: false },
name: { type: 'string', optional: false }
},
typeName: 'Item'
}],
returnType: { type: 'void' }
},
initialCount: {
type: 'number',
optional: true,
defaultValue: '0'
}
},
wrapperFn: 'React.memo'
}]
}
```
# Project Sponsor
[Ray Labs](https://raylabs.ai)