ckreact

A Visual Studio Code extension providing snippets for React components, Redux slices, custom hooks, JSON data, and CSS styles with ct prefix.

Features

• Generate React components, Redux slices, custom hooks, JSON data, and CSS styles.
• Supports .json, .js, .jsx, .ts, .tsx, and .css files.
• Works offline.

Available Snippets

• ctfooter: Footer component with Bootstrap styling.
• ctproductcard: ProductCard component with cart functionality.
• ctloading: Enhanced LoadingSpinner component with size options and full-screen mode.
• ctnavbar: Navbar component with cart integration and badge showing item count.
• ctproductslice: Redux Toolkit slice for product management.
• ctcartslice: Redux Toolkit slice for shopping cart management.
• ctusefetch: Custom useFetch hook for data fetching.
• cteditproduct: EditProduct component for updating products.
• ctaddproduct: AddProduct component with form validation.
• cthome: Home component with responsive product grid.
• ctproductdetail: ProductDetail component with cart integration.
• ctcart: Cart component with full cart management functionality.
• ctapp: App component with complete routing setup including Cart.
• ctproductjson: JSON product template.
• ctstore: Redux store configuration with product and cart reducers.
• ctmain: Main JSX with Bootstrap, Redux and React-Toastify.
• ctpackagejson: Package.json for React app with Vite.
• ctglobalcss: Global CSS styles for React app.

Requirements

• Visual Studio Code 1.99.0 or higher.

Installation

1. Download the .vsix file.
2. In VS Code: Extensions > ... > Install from VSIX.
3. Type ct followed by snippet name (e.g., ctfooter, ctproductjson, ctglobalcss) in supported files.

Usage

• .js/.jsx/.ts/.tsx: Type ctfooter, ctnavbar, ctproductslice, ctstore, etc., for components, slices, or hooks.
• .json: Type ctproductjson or ctpackagejson for JSON data or package.json.
• .css: Type ctglobalcss for global CSS styles.