🚀 React Snippets Pro

A curated and comprehensive collection of high-quality, productivity-boosting VSCode code snippets for modern React and TypeScript development. Save time writing boilerplate code and focus on building powerful UIs.

🔗 View Repository

📑 Table of Contents

• 🚀 React Snippets Pro
  • 📑 Table of Contents
  • 📖 Introduction
  • ✨ Features
  • 📦 Snippets Included
    • 📁 Components
    • 📁 Hooks
    • 📁 State Management
    • 📁 Event Handlers
    • 📁 API Service & Requests
  • 🛠️ Installation
  • 🤝 Contributing
  • 📄 License
  • 📣 Author

📖 Introduction

React Snippets Pro is a developer-friendly VSCode snippets collection built for efficient React and TypeScript development. Whether you're building components, managing state, working with hooks, or handling APIs — these well-structured snippets have got you covered.

✨ Features

• 🔹 Modern React + TypeScript snippets
• 🔹 Clean, readable, and consistent coding patterns
• 🔹 Covers React components, hooks, state management, API services, handlers, and context
• 🔹 Includes Axios service templates with interceptors
• 🔹 Custom hook generator snippets
• 🔹 Type-safe useState, useReducer, and context setup
• 🔹 Productivity-focused snippet prefixes for rapid coding

📦 Snippets Included

📁 Components

• rafce — React Arrow Function Component Export
• rfc — React Functional Component
• rfcp — React Functional Component with Props
• rfcc — React Functional Component with Children

📁 Hooks

• st — Basic useState
• uf — useEffect
• ucb — useCallback
• um — useMemo
• urf — useRef
• urd — useReducer
• hook — Custom React Hook generator
• ctx — React Context Provider with custom hook

📁 State Management

• st_data — Data state
• st_loading — Loading state
• st_error — Error state

📁 Event Handlers

• hclk, hclk_memo, hclk_event, hclk_cb — Various click handlers
• hcg, hcg_memo, hcg_gen — Change handlers
• hsubmit — Form submission handler

📁 API Service & Requests

• svc — Axios API Service
• svc_auth — Authentication Service Class
• svc_mgmt — Dynamic Management Service Class
• api_get, api_post, api_put, api_delete — API calls with state management

🛠️ Installation

1. Clone the repository or download the JSON snippet file.

   git clone https://github.com/blessedrajp/react-snippets-pro.git
   
   
   

🚀 Usage

Start typing the snippet prefix inside your React or TypeScript files, and VSCode IntelliSense will suggest the corresponding snippet.

Example: Type rafce → press Tab → React arrow function component boilerplate is generated.

⚙️ Configuration

You can customize the prefixes or snippet bodies by modifying the snippet JSON file directly.

The Axios service snippets expect an environment variable:

REACT_APP_API_BASE_URL=https://your-api-url.com

🤝 Contributing

Contributions, feature requests, and feedback are highly appreciated! 🎉

To contribute:

Fork this repo.

Create a new branch (git checkout -b feature/your-feature).

Commit your changes (git commit -m 'Add your snippet').

Push to the branch (git push origin feature/your-feature).

Open a Pull Request.

📄 License

This project is licensed under the MIT License.

📣 Author

👤 Blessed Rajp 🔗 GitHub