https://github.com/aviralj02/usestatemate

🪄 Simplify React state management with useState setter suggestions and auto-generation.
https://github.com/aviralj02/usestatemate

reactjs typescript usestate vscode-extension

Last synced: about 1 month ago
JSON representation

🪄 Simplify React state management with useState setter suggestions and auto-generation.

• Host: GitHub
• URL: https://github.com/aviralj02/usestatemate
• Owner: aviralj02
• License: mit
• Created: 2024-11-06T16:32:38.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-11-11T11:58:34.000Z (7 months ago)
• Last Synced: 2025-03-31T07:22:19.001Z (3 months ago)
• Topics: reactjs, typescript, usestate, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=aviralj02.usestatemate
• Size: 31.4 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🪄 useStateMate: useState Helper

Easily transform selected text into a `useState` hook in JavaScript/TypeScript and get autocompletions for the setter function! This extension streamlines React state management by suggesting setter function names as you type and by helping you quickly create useState hooks with inferred types from selected text

## ✨ Features

### Auto-Suggest Setter Function for `useState`

- Start typing a useState declaration, and when you enter const [stateVariable, , the extension will suggest an autocompletion for the setter function name.

- Works for JavaScript and TypeScript files, including `.js`, `.jsx`, `.ts`, and `.tsx`.

### Convert Selected Text to `useState` Hook with Inferred Type

- Select any text, press `CTRL + SHIFT + P` , and choose **"Add useState With Types"**.

- Enter a name for your state variable, and the extension will auto-generate a `useState` hook with an inferred type based on the selected text.

## 🚀 Usage

### Auto-Suggest Setter Function for `useState`

![autocomplete-usage](./media/usage1.gif)

### Convert Selected Text to `useState` Hook with Inferred Type

![infer-type-usage](./media/usage2.gif)

## 🔧 Requirements

- Works with JavaScript/TypeScript in files with extensions `.js`, `.jsx`, `.ts`, and `.tsx`.

- No additional setup needed after installation.

## 👤 Author

Authored and maintained by [aviralj02](https://aviral.xyz).