WuSnippets - React Component Snippets for VS Code

Table of Contents

1. ✨ Features
2. 🚀 Installation
3. 📖 Usage
4. 📑 Available Snippets
   • Application Layout
   • Navigation
   • Buttons and Actions
   • Form Inputs
   • Menus and Popovers
   • Utility Components
5. ⚙️ Configuration
6. 📚 Examples
   • Primary Navbar with Active Link
   • Secondary Navbar with Icons
7. 📜 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

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

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

1. Open a .jsx or .tsx file in VS Code.
2. Type the snippet prefix (e.g., wu-button, wu-primarynavbar) and press Tab or select from the autocomplete suggestions.
3. 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

Navigation

Buttons and Actions

Form Inputs

Menus and Popovers

Utility Components

⚙️ Configuration

No additional configuration is required! However, ensure your project supports:

• React (.jsx or .tsx files).

• A routing library like react-router-dom if using navigation snippets with Link.

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.