React Flow SnippetsFast, modern, and high-productivity React, JSX, TSX, Hooks, and TypeScript code snippets for VS Code. Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
React Flow SnippetsA comprehensive and context-aware VS Code snippet extension designed to boost your productivity with React Flow, React, TanStack Query, and core JavaScript/TypeScript design patterns. Supports Features
Snippet Cheat Sheet & Code PreviewJavaScript & TypeScript (
|
| Prefix | Description | Generated Code Preview |
|---|---|---|
clg |
Console Log | console.log(object); |
imp |
Module Import | import name from 'module'; |
exp |
Default Export | export default name; |
expd |
Named Export | export { name }; |
enum |
TypeScript Enum | enum Name { Member = 'Value' } |
generic |
Generic Function | function name<T>(arg: T): T { return arg; } |
try |
Try-Catch Block | try { ... } catch (error) { ... } |
React Hooks & Utilities (.jsx, .tsx)
| Prefix | Description | Generated Code Preview |
|---|---|---|
us |
useState Hook |
const [state, setState] = useState(initialState); |
ue |
useEffect Hook |
useEffect(() => { ... }, []); |
uref |
useRef Hook |
const ref = useRef(initialValue); |
ucallback |
useCallback Hook |
useCallback(() => { ... }, []); |
umemo |
useMemo Hook |
useMemo(() => computeValue, []); |
usequery |
TanStack useQuery |
const { data, isLoading, error } = useQuery({ queryKey: ['key'], queryFn: fn }); |
usemutation |
TanStack useMutation |
const mutation = useMutation({ mutationFn: fn, onSuccess: () => {} }); |
event |
Form Event Handler | const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {}; |
Components & React Flow (.jsx, .tsx)
| Prefix | Description | Generated Code Preview |
|---|---|---|
rfc / tsrfc |
React Functional Component | export const Component = () => { return <div></div>; }; |
rafce / tsrafce |
Arrow Component + Export | const Component = () => { return <div></div>; }; export default Component; |
fcprops |
FC with Props Interface | interface Props { children?: React.ReactNode; } export const Component = ({ children }: Props) => { ... }; |
rfnode |
Custom React Flow Node | Generates a fully typed React Flow Node component with <Handle/> wrappers. |
rfedge |
Custom React Flow Edge | Generates a React Flow Custom Edge component using getBezierPath & <BaseEdge/>. |
Usage
- Open any
.js,.jsx,.ts, or.tsxfile. - Type any of the supported prefixes listed above.
- Press
TaborEnterto expand the snippet and jump through placeholders.
License
This project is licensed under the MIT License.