https://github.com/sunny-117/eslint-plugin-react-boundary
ESLint plugin to ensure React components are wrapped with Boundary
https://github.com/sunny-117/eslint-plugin-react-boundary
boundary error-boundary eslint eslint-plugin eslint-plugin-react eslint-rules react
Last synced: 23 days ago
JSON representation
ESLint plugin to ensure React components are wrapped with Boundary
- Host: GitHub
- URL: https://github.com/sunny-117/eslint-plugin-react-boundary
- Owner: Sunny-117
- Created: 2025-09-12T08:50:10.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2025-09-12T09:29:37.000Z (27 days ago)
- Last Synced: 2025-09-12T10:37:56.239Z (27 days ago)
- Topics: boundary, error-boundary, eslint, eslint-plugin, eslint-plugin-react, eslint-rules, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/eslint-plugin-react-boundary
- Size: 58.6 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# eslint-plugin-react-boundary
ESLint plugin to ensure React components are wrapped with `` component for better error handling.
## Installation
```bash
npm install --save-dev eslint-plugin-react-boundary
```
## Usage
Add `react-boundary` to the plugins section of your `.eslintrc` configuration file:
```json
{
"plugins": ["react-boundary"],
"rules": {
"react-boundary/require-boundary": "error"
}
}
```
## Rule: require-boundary
This rule ensures that all exported React components are wrapped with a `` component.
### Options
The rule accepts an options object with the following properties:
- `boundaryComponent` (string): The name of the boundary component to check for. Default: `"Boundary"`
- `importSource` (string): The module from which the boundary component should be imported. Default: `"react-suspense-boundary"`
Example configuration:
```json
{
"rules": {
"react-boundary/require-boundary": [
"error",
{
"boundaryComponent": "ErrorBoundary",
"importSource": "@/components/ErrorBoundary"
}
]
}
}
```
### Examples
#### ❌ Incorrect
```jsx
// Missing Boundary wrapper
export function MyComponent() {
return
Hello World;
}
// Default export without Boundary
export default function App() {
return
App;
}
// Named export without Boundary
export const Header = () => {
return Header;
};
```
#### ✅ Correct
```jsx
import { Boundary } from 'react-suspense-boundary';
// Wrapped with Boundary
export function MyComponent() {
return (
Hello World
);
}
// Default export with Boundary
export default function App() {
return (
App
);
}
// Named export with Boundary
export const Header = () => {
return (
Header
);
};
```
## What it checks
The plugin checks for:
1. **Named exports**: `export function Component()`, `export const Component = ()`
2. **Default exports**: `export default function Component()`, `export default () => {}`
3. **Function components**: Components that return JSX elements
4. **Component naming**: Functions with names starting with uppercase letters
5. **JSX returns**: Functions that return JSX elements, fragments, or conditional JSX
## Features
- Detects React component files automatically
- Supports both function declarations and arrow functions
- Handles named and default exports
- Configurable boundary component name and import source
- Provides helpful error messages
- Auto-fix capability (basic implementation)
## Development
To test the plugin locally:
1. Clone the repository
2. Run `npm install`
3. Run tests: `npm run test`
### Running Tests
```bash
npm run test
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT