
A powerful VS Code extension to generate React components, hooks, contexts, services and guards with best practices and productivity in mind.
React Stack Tools streamlines your React development workflow by automatically generating boilerplate code for common React patterns. Create components with complete folder structures, custom hooks, context providers, API services, and more — all following industry best practices and modern React conventions.

✨ Features
📦 Component Generator: Creates complete component folders with:
- React component (
.tsx
)
- CSS Modules (
.module.css
)
- TypeScript types (
.types.ts
)
- Unit tests (
.test.tsx
)
- Index file for clean exports
🔧 Custom Hook Generator: Generates reusable custom hooks with:
- Hook implementation with useState and useEffect
- Unit tests with React Testing Library
- Proper TypeScript types
- Index file for exports
🌐 Context Generator: Creates React Context patterns with:
- Context definition with TypeScript interfaces
- Provider component with state management
- Custom hook for consuming context
- Complete folder structure
🛠️ Service Generator: Generates API service layers with:
- Axios-based HTTP client
- CRUD operations (Create, Read, Update, Delete)
- TypeScript support
- Unit tests with mocked axios
🛡️ Guard Generator: Creates route guards and authentication helpers
⚡ Quick Access: Right-click context menu in Explorer
🎯 Smart Naming: Automatic PascalCase conversion
📁 Organized Structure: Creates dedicated folders for each generated item
📥 Installation
Via VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X
/ Cmd+Shift+X
)
- Search for "React Stack Tools"
- Click Install
Via VSIX File
- Download the
.vsix
file from the releases page
- Open VS Code
- Open Command Palette (
Ctrl+Shift+P
/ Cmd+Shift+P
)
- Run
Extensions: Install from VSIX...
- Select the downloaded
.vsix
file
🚀 Usage
- Right-click on any folder in the Explorer
- Select "React: Generate File"
- Choose the type of file you want to generate:
- 📦 Generate Component
- 🔧 Generate Hook
- 🌐 Generate Context
- 🛠️ Generate Service
- Enter the name for your new item
- The extension will create a complete folder structure
Using the Command Palette
- Open Command Palette (
Ctrl+Shift+P
/ Cmd+Shift+P
)
- Type "React: Generate File"
- Follow the same steps as above
📸 Screenshots
Right-click context menu showing the React Stack Tools option
Generator selection menu with available options
Example of generated component folder structure
📋 Examples
Generated Component Structure
MyButton/
├── MyButton.tsx
├── MyButton.module.css
├── MyButton.types.ts
├── MyButton.test.tsx
└── index.ts
MyButton.tsx
import './MyButton.module.css';
export const MyButton = () => {
return (
<div>
<h1>MyButton Component</h1>
</div>
);
};
MyButton.types.ts
export interface MyButtonProps {
// define props here
}
Generated Hook Structure
useAuth/
├── useAuth.ts
├── useAuth.test.tsx
└── index.ts
useAuth.ts
import { useState, useEffect } from 'react';
export const useAuth = () => {
const [state, setState] = useState<AuthState | null>(null);
useEffect(() => {
// Fetch or compute initial state here
setState(initialState);
}, []);
return state;
};
Generated Service Structure
user/
├── UserService.ts
├── UserService.test.ts
└── index.ts
UserService.ts
import axios from 'axios';
export const UserService = {
fetchAll: async () => {
const response = await axios.get('/api/user');
return response.data;
},
fetchById: async (id: string | number) => {
const response = await axios.get(`/api/user/${id}`);
return response.data;
},
create: async (data: any) => {
const response = await axios.post('/api/user', data);
return response.data;
},
update: async (id: string | number, data: any) => {
const response = await axios.put(`/api/user/${id}`, data);
return response.data;
},
delete: async (id: string | number) => {
const response = await axios.delete(`/api/user/${id}`);
return response.data;
},
};
Generated Context Structure
UserContext/
├── UserContext.ts
├── UserProvider.tsx
├── useUser.ts
└── index.ts
🔧 Requirements
- VS Code 1.102.0 or higher
- React project (TypeScript recommended)
🛠️ Built With
- TypeScript - Type safety and modern JavaScript features
- VS Code Extension API - Integration with VS Code
- Node.js - Runtime environment
- ESBuild - Fast bundling for production
📦 Dependencies
The generated service files use Axios for HTTP requests. Make sure to install it in your project:
npm install axios
# or
yarn add axios
For testing, the generated test files use @testing-library/react:
npm install --save-dev @testing-library/react @testing-library/jest-dom
# or
yarn add --dev @testing-library/react @testing-library/jest-dom
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature
)
- Commit your changes (
git commit -m 'Add some AmazingFeature'
)
- Push to the branch (
git push origin feature/AmazingFeature
)
- Open a Pull Request
📝 Changelog
See CHANGELOG.md for a detailed history of changes.
🐛 Known Issues
- None at the moment. If you find any issues, please report them in the GitHub Issues page.
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Thanks to the VS Code team for the excellent extension API
- Inspired by modern React development practices
- Built with love for the React community ❤️
Enjoy coding with React Stack Tools! 🚀
If you find this extension helpful, please consider giving it a ⭐ on the marketplace and sharing it with your fellow developers!