ReactTypeKit Snippets

v2.1.2 · by Miguel Machado · added 3 November 2026

A comprehensive set of React, React Native, Redux + TypeScript snippets designed to boost productivity and ensure consistent, type-safe code.

Snippets

Install in Forge Super View the source

How to install

With Forge Super installed, the button above opens the app on this extension, where you press Install. Nothing is installed until you do.

You can also open the Extensions panel in the app and search for ReactTypeKit Snippets. The extension's id is react-type-kit-snippets.

Don't have Forge Super yet? Download it here.

README

From the extension's repository, written by its authors and not by Mentenaz. See the source.

ReactTypeKit — Zed Snippets for React + TypeScript + TanStack Query

Dynamic JSON Badge

A curated collection of Zed editor snippets to speed up React development in TypeScript: components, hooks, context, Redux Toolkit patterns, and more.

🚀 Features

Snippets for functional components (arrow & function style)
Typed useState, useEffect, useMemo, useCallback, useReducer, etc.
ForwardRef components
Custom hook template
React Context boilerplate with provider + hook
Redux Toolkit slice, store, typed hooks
Interface / type / enum helpers
TanStack Query snippets

All built assuming you write React in TypeScript, so you get strong typing and consistent patterns.

📦 Installation (Zed)

Just click here :D
That's it. Simple as that.

🧰 Snippet Usage

Here are some sample prefixes and what they expand into:

Prefix	Expands Into	Description
`rfc`	Arrow functional component with props interface	A modern component template
`rff`	Function-style component	Alternate component syntax
`us`	`useState<…>` boilerplate	Typed state hook
`uem`	`useEffect(() => { … }, [])`	Effect that runs once on mount
`useCallback`	`useCallback(() => { … }, [deps])`	Memoized callback
`rctx`	Context + Provider + custom hook boilerplate	Setup for React Context in TS
`rtslice`	Redux Toolkit slice	Boilerplate for slices
`rtth`	Typed Redux hooks	`useAppSelector`, `useAppDispatch` etc.

You can inspect the full snippet definitions (triggering texts, placeholders, etc.) inside the extension file.

📄 Example

Typing:

rfc

Might expand to:

interface MyComponentProps {
  title: string;
}

const MyComponent = ({ title }: MyComponentProps) => {
  return (
    <div>
      {title}
    </div>
  );
};

export default MyComponent;

Then you can tab through placeholders to rename component, props, types, etc.

💡 Tips & Customization

You can rename or adjust snippet names/prefixes to match your coding style.
Add your own snippet variations (e.g. for styled-components, Tailwind, etc.).
Use snippet placeholders and tab stops to efficiently navigate through your template when inserted.
Keep the file organized: group similar snippets together, and document custom ones.

📝 Acknowledgments & License

This extension is inspired by the Zed React TS snippets by vishnuroshan. You’re free to use, modify, and distribute — include your preferred license (MIT, Apache, etc.).