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 for product details.
• ctloading: LoadingSpinner component.
• ctnavbar: Navbar component with react-router-dom.
• ctproductslice: Redux Toolkit slice for product management.
• ctusefetch: Custom useFetch hook for data fetching.
• cteditproduct: EditProduct component for updating products.
• cthome: Home component for product listing.
• ctproductdetail: ProductDetail component for product details.
• ctapp: App component with react-router-dom setup.
• ctproductjson: JSON product template.
• ctstore: Redux store configuration with Redux Toolkit.
• 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.