WuSnippets - React Component Snippets for VS Code

Table of Contents
- ✨ Features
- 🚀 Installation
- 📖 Usage
- 📑 Available Snippets
- ⚙️ Configuration
- 📚 Examples
- 📜 License
WuSnippets is a Visual Studio Code extension that provides a comprehensive collection of snippets for Wu React components. Designed to accelerate development workflows, it offers ready-to-use code templates for common UI patterns, including navigation bars, form inputs, modals, and more.
✨ Features
- Extensive Snippet Library: Over 50 snippets covering buttons, forms, menus, navigation, and utility components.
- Organized Categories: Snippets are grouped into logical categories like "Navigation," "Form Inputs," and "Menus and Popovers" for easy access.
- Basic and Extended Variants: Each component includes a basic version and an extended version with additional props and features.
- Routing Ready: Navigation snippets use
Link
(e.g., from react-router-dom
) for modern React applications.
- Customizable: Includes placeholders and sensible defaults to jumpstart your coding while allowing full customization.
- Updated Regularly: Continuously updated with new components and improvements.
🚀 Installation
Via VS Code Marketplace (Recommended):
- Search for "WuSnippets" in the Extensions view (
Ctrl+Shift+X
or Cmd+Shift+X
on Mac).
- Click "Install" to add it to your VS Code environment.
Manual Installation:
- Download the
.vsix
file from the releases page.
- In VS Code, go to Extensions (
Ctrl+Shift+X
), click the ...
menu, and select "Install from VSIX."
- Select the downloaded file to install.
📖 Usage
- Open a
.jsx
or .tsx
file in VS Code.
- Type the snippet prefix (e.g.,
wu-button
, wu-primarynavbar
) and press Tab
or select from the autocomplete suggestions.
- Use
Tab
to navigate through placeholders and customize the generated code.
Example
Type wu-secondarynavbar
and press Tab
to generate:
<WuSecondaryNavbar
Links={[
{
link: <Link to="/dashboard">Dashboard</Link>,
imgOrIcon: <span className="wc-logo" />,
},
{
link: <Link to="/settings">Settings</Link>,
imgOrIcon: <span className="wc-settings" />,
},
{
link: <Link to="/profile">Profile</Link>,
imgOrIcon: <span className="wc-user" />,
},
]}
className=""
/>
📑 Available Snippets
Application Layout
Prefix |
Description |
wu-appheader |
Basic application header component |
wu-appheader-breadcrumb |
Application header with breadcrumb navigation |
wu-root |
Root layout with app header, sidebar, footer |
wu-sidebar |
Basic sidebar component |
wu-footer |
Basic footer component |
Navigation
Prefix |
Description |
wu-primarynavbar |
Basic primary navbar component |
wu-primarynavbar-extended |
Extended primary navbar with active link and right-side content |
wu-secondarynavbar |
Basic secondary navbar component with icon links |
wu-secondarynavbar-extended |
Extended secondary navbar with active link and right-side content |
Prefix |
Description |
wu-button |
Basic button component |
wu-button-extended |
Extended button with icon and state options |
wu-helpbutton |
Basic help button component |
wu-helpbutton-extended |
Extended help button with size and variant options |
Prefix |
Description |
wu-checkbox |
Basic checkbox component |
wu-checkbox-extended |
Extended checkbox with additional states and options |
wu-combobox |
Basic combobox component |
wu-combobox-extended |
Extended combobox with multi-select and virtual scrolling |
wu-datepicker |
Basic date picker component |
wu-datepicker-extended |
Extended date picker with range and reset options |
wu-daterangepicker |
Basic date range picker component |
wu-daterangepicker-extended |
Extended date range picker with presets and reset |
wu-formgroup |
Form group with label, input, error, and hint |
wu-input |
Basic input component |
wu-input-extended |
Extended input with icon and styling options |
wu-radiogroup |
Basic radio group component |
wu-radiogroup-extended |
Extended radio group with additional options |
wu-select |
Basic select component |
wu-select-extended |
Extended select with multi-select and virtual scrolling |
wu-stepper |
Basic stepper component |
wu-stepper-extended |
Extended stepper with range and control options |
wu-textarea |
Basic textarea component |
wu-textarea-extended |
Extended textarea with additional options |
wu-toggle |
Basic toggle component |
wu-toggle-extended |
Extended toggle with positioning options |
Menus and Popovers
Prefix |
Description |
wu-menu |
Basic menu component |
wu-menu-extended |
Extended menu with positioning and styling options |
wu-menucheckboxitem |
Basic menu checkbox item |
wu-menucheckboxitem-extended |
Extended menu checkbox item with additional options |
wu-menuitem |
Basic menu item |
wu-menuitem-extended |
Extended menu item with icon and behavior options |
wu-menuitemgroup |
Basic menu item group |
wu-menuradioitem |
Basic menu radio item |
wu-menuradioitem-extended |
Extended menu radio item with disabled options |
wu-menuseparatoritem |
Basic menu separator item |
wu-modal |
Basic modal component |
wu-modal-extended |
Extended modal with sizing and control options |
wu-popover |
Basic popover component |
wu-popover-extended |
Extended popover with positioning and control options |
wu-submenu |
Basic submenu component |
wu-submenu-extended |
Extended submenu with direction and styling |
wu-switcher |
Basic switcher component |
wu-switcher-extended |
Extended switcher with size and state options |
Utility Components
Prefix |
Description |
wu-loader |
Basic loader component |
wu-loader-extended |
Extended loader with variant and message |
wu-tooltip |
Basic tooltip component |
wu-tooltip-extended |
Extended tooltip with positioning options |
wu-virtualscroll |
Basic virtual scroll component |
⚙️ Configuration
No additional configuration is required! However, ensure your project supports:
To customize snippets, fork the repository and modify snippets/snippets.json
.
📚 Examples
Primary Navbar with Active Link
<WuPrimaryNavbar
Links={[
<Link to="/">Home</Link>,
<Link to="/about" className="wu-primary-nav-active-link">
About
</Link>,
<Link to="/services">Services</Link>,
<Link to="/contact">Contact</Link>,
]}
className="custom-navbar"
>
<div className="flex items-center gap-4">
<button className="px-4 py-2 text-white bg-blue-500 rounded">Login</button>
</div>
</WuPrimaryNavbar>
Secondary Navbar with Icons
<WuSecondaryNavbar
Links={[
{
link: <Link to="/dashboard">Dashboard</Link>,
imgOrIcon: <span className="wc-logo" />,
},
{
link: <Link to="/settings">Settings</Link>,
imgOrIcon: <span className="wc-settings" />,
},
]}
/>
📜 License
This extension is licensed under the MIT License.