IntelliJ Live Templates for TypeScript and React

Live templates for TypeScript and typed React code, for IntelliJ IDEA, WebStorm, PHPStorm and other JetBrains IDEs. With sensible variable expressions and useful skeleton templates.

Supported templates:

• uses: React.useState()
• usee: React.useEffect()
• useh: React use Hook
• rfc: React Functional Component
• rfct: React typed Functional Component
• rfr: React forward Ref
• int: TypeScript Interface
• type: TypeScript Type
• arr: Anonymous arrow function
• el: JSX element
• rcctx: React create new Context with type, hook and provider
• ifs: import fs
• ipath: import path
• funarr: Arrow function variable
• fun: Function
• asyncarr: Async anonymous arrow function
• prom: New Promise
• timeout: setTimeout
• interval: setInterval
• usem: React.useMemo()
• usec: React.useCallback()

If the library benefits, you can consider supporting it by sponsoring me.

Template code

React.useState()

Invoked via uses.

const [$VAR$, set$VAR_SET$] = useState($DEFAULT_VAL$);$END$

Variables:

Name	Expression	Default Value	Skip if defined
VAR	-		false
VAR_SET	capitalize(VAR)		false
DEFAULT_VAL	-		false

React.useEffect()

Invoked via usee.

useEffect(() => {
    $END$
}, [$1$]);

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false

React use Hook

Invoked via useh.

const $3$ = use$1$($2$);$END$

Variables:

Name	Expression	Default Value	Skip if defined
1	completeSmart()		false
2	completeSmart()	{}	false
3	-		false

React Functional Component

Invoked via rfc.

export const $1$: React.FC<{$2$}> = props => {
    return (
        <$3$>
            $END$
        </$3$>
    );
};

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false
2	-		false
3	-		false

React typed Functional Component

Invoked via rfct.

export const $1$ = <$2$>(props: PropsWithChildren<$3$>) => {
    return (
        <$4$>
            $END$
        </$4$>
    );
};

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false
2	-		false
3	-		false
4	-		false

React forward Ref

Invoked via rfr.

export const $COMP$ = React.forwardRef<HTML$ELEMENT_TYPE$ | null, $PROPS$>((props, ref) => {
    const elementRef = useRef<HTML$ELEMENT_TYPE$>(null);
    useImperativeHandle<HTML$ELEMENT_TYPE$ | null, HTML$ELEMENT_TYPE$ | null>(
        ref,
        () => elementRef.current && {
            ...elementRef.current,
        },
    );
    $END$
    return (
        <$INNER_COMP$ ref={elementRef} />
    );
});

Variables:

Name	Expression	Default Value	Skip if defined
COMP	-		false
ELEMENT_TYPE	completeSmart()		false
PROPS	-	{}	false
INNER_COMP	completeSmart()		false

TypeScript Interface

Invoked via int.

export interface $1$ {
    $END$
}

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false

TypeScript Type

Invoked via type.

export type $1$ = {
    $END$
}

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false

Anonymous arrow function

Invoked via arr.

($1$) => $2$

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false
2	-		false

JSX element

Invoked via el.

<$ELEMENT$PROPS$>
    $END$
</$ELEMENT$>

Variables:

Name	Expression	Default Value	Skip if defined
ELEMENT	-	div	false
PROPS	-		false

React create new Context with type, hook and provider

Invoked via rcctx.

type $CONTEXT_NAME_TYPE$ContextType = {
    $END$
};

const $CONTEXT_NAME$Context = React.createContext<$CONTEXT_NAME$ContextType>($DEFAULT_VALUE$);
export const use$CONTEXT_NAME_HOOK$ = () => React.useContext($CONTEXT_NAME$Context);

export const $CONTEXT_NAME_PROVIDER$Provider: React.FC = props => {
    return (
        <$CONTEXT_NAME$Context.Provider value={$VAL$}>
            {props.children}
        </$CONTEXT_NAME$Context.Provider>
    );
};

Variables:

Name	Expression	Default Value	Skip if defined
CONTEXT_NAME	-		false
CONTEXT_NAME_TYPE	CONTEXT_NAME		false
DEFAULT_VALUE	-	{}	false
CONTEXT_NAME_HOOK	capitalize(CONTEXT_NAME)		false
CONTEXT_NAME_PROVIDER	capitalize(CONTEXT_NAME)		false
VAL	-	{}	false

import fs

Invoked via ifs.

import fs from 'fs';

import path

Invoked via ipath.

import path from 'path';

Arrow function variable

Invoked via funarr.

const $VAR_NAME$ = ($PARAM$) => $END$;

Variables:

Name	Expression	Default Value	Skip if defined
VAR_NAME	jsSuggestVariableName()		false
PARAM	-		false

Function

Invoked via fun.

function $FUNCTION_NAME$($PARAM$) {
    $END$
}

Variables:

Name	Expression	Default Value	Skip if defined
FUNCTION_NAME	-		false
PARAM	-		false

Async anonymous arrow function

Invoked via asyncarr.

async ($1$) => $2$

Variables:

Name	Expression	Default Value	Skip if defined
1	-		false
2	-		false

New Promise

Invoked via prom.

new Promise<$TYPE$((res, rej) => {
    $END$
});

Variables:

Name	Expression	Default Value	Skip if defined
TYPE	-	void	false

setTimeout

Invoked via timeout.

setTimeout(() => $END$, $TIME$);

Variables:

Name	Expression	Default Value	Skip if defined
TIME	completeSmart()		false

setInterval

Invoked via interval.

setInterval(() => $END$, $TIME$);

Variables:

Name	Expression	Default Value	Skip if defined
TIME	completeSmart()		false

React.useMemo()

Invoked via usem.

const $VAR$ = useMemo(() => $RETURN$, [$DEP$]);

Variables:

Name	Expression	Default Value	Skip if defined
RETURN	completeSmart()		false
DEP	completeSmart()		false
VAR	-		false

React.useCallback()

Invoked via usec.

const $VAR$ = useCallback(() => $RETURN$, [$DEP$]);

Variables:

Name	Expression	Default Value	Skip if defined
RETURN	completeSmart()		false
DEP	completeSmart()		false
VAR	-		false

Contributions

Feel free to contribute to existing or new templates with issues or pull requests.

To test if your changes are working, clone the repo and run the gradle script runIde.

Do not update the documentation in the readme.md or plugin.xml files, they are updated automatically.