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.

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.

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

.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.