{"id":18320599,"url":"https://github.com/lukasbach/intellij-ts-react-livetemplates","last_synced_at":"2025-07-01T22:07:22.237Z","repository":{"id":41533157,"uuid":"367748632","full_name":"lukasbach/intellij-ts-react-livetemplates","owner":"lukasbach","description":"Live Templates for Typescript and React","archived":false,"fork":false,"pushed_at":"2025-06-03T21:01:47.000Z","size":101,"stargazers_count":50,"open_issues_count":2,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-04T05:40:01.620Z","etag":null,"topics":["addon","ide","intellij","jetbrains","live","plugin","react","templates","typescript"],"latest_commit_sha":null,"homepage":"https://plugins.jetbrains.com/plugin/16796-live-templates-for-typescript-and-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukasbach.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lukasbach"}},"created_at":"2021-05-15T23:30:49.000Z","updated_at":"2025-06-03T21:01:49.000Z","dependencies_parsed_at":"2023-12-14T16:44:51.231Z","dependency_job_id":"48126e93-0bbd-47e1-9665-a2e5dde0ab15","html_url":"https://github.com/lukasbach/intellij-ts-react-livetemplates","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lukasbach/intellij-ts-react-livetemplates","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fintellij-ts-react-livetemplates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fintellij-ts-react-livetemplates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fintellij-ts-react-livetemplates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fintellij-ts-react-livetemplates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasbach","download_url":"https://codeload.github.com/lukasbach/intellij-ts-react-livetemplates/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fintellij-ts-react-livetemplates/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263042355,"owners_count":23404459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","ide","intellij","jetbrains","live","plugin","react","templates","typescript"],"created_at":"2024-11-05T18:16:49.919Z","updated_at":"2025-07-01T22:07:22.210Z","avatar_url":"https://github.com/lukasbach.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lukasbach"],"categories":[],"sub_categories":[],"readme":"# IntelliJ Live Templates for TypeScript and React\n\n[![Download](https://img.shields.io/badge/Get-from%20JetBrains%20Marketplace-brightgreen)](https://plugins.jetbrains.com/plugin/16796-live-templates-for-typescript-and-react)\n[![Build and verify](https://github.com/lukasbach/intellij-ts-react-livetemplates/actions/workflows/verify.yml/badge.svg)](https://github.com/lukasbach/intellij-ts-react-livetemplates/actions/workflows/verify.yml)\n[![Deploy](https://github.com/lukasbach/intellij-ts-react-livetemplates/actions/workflows/deploy.yml/badge.svg)](https://github.com/lukasbach/intellij-ts-react-livetemplates/actions/workflows/deploy.yml)\n![JetBrains plugins](https://img.shields.io/jetbrains/plugin/d/16796)\n![JetBrains Plugins](https://img.shields.io/jetbrains/plugin/r/rating/16796)\n\nLive templates for TypeScript and typed React code, for IntelliJ IDEA,\nWebStorm, PHPStorm and other JetBrains IDEs. With sensible variable\nexpressions and useful skeleton templates.\n\nSupported templates:\n\n- `uses`: _React.useState()_\n- `usee`: _React.useEffect()_\n- `useh`: _React use Hook_\n- `rfc`: _React Functional Component_\n- `rfct`: _React typed Functional Component_\n- `rfr`: _React forward Ref_\n- `int`: _TypeScript Interface_\n- `type`: _TypeScript Type_\n- `arr`: _Anonymous arrow function_\n- `el`: _JSX element_\n- `rcctx`: _React create new Context with type, hook and provider_\n- `ifs`: _import fs_\n- `ipath`: _import path_\n- `funarr`: _Arrow function variable_\n- `fun`: _Function_\n- `asyncarr`: _Async anonymous arrow function_\n- `prom`: _New Promise_\n- `timeout`: _setTimeout_\n- `interval`: _setInterval_\n- `usem`: _React.useMemo()_\n- `usec`: _React.useCallback()_\n\n\nIf the library benefits, you can consider supporting it by [sponsoring me](https://github.com/sponsors/lukasbach).\n\n## Template code\n\n\n### React.useState()\n\nInvoked via `uses`.\n\n```\nconst [$VAR$, set$VAR_SET$] = useState($DEFAULT_VAL$);$END$\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`VAR`|`-`||false|\n|`VAR_SET`|`capitalize(VAR)`||false|\n|`DEFAULT_VAL`|`-`||false|\n\n### React.useEffect()\n\nInvoked via `usee`.\n\n```\nuseEffect(() =\u003e {\n    $END$\n}, [$1$]);\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n\n### React use Hook\n\nInvoked via `useh`.\n\n```\nconst $3$ = use$1$($2$);$END$\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`completeSmart()`||false|\n|`2`|`completeSmart()`|{}|false|\n|`3`|`-`||false|\n\n### React Functional Component\n\nInvoked via `rfc`.\n\n```\nexport const $1$: React.FC\u003c{$2$}\u003e = props =\u003e {\n    return (\n        \u003c$3$\u003e\n            $END$\n        \u003c/$3$\u003e\n    );\n};\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n|`2`|`-`||false|\n|`3`|`-`||false|\n\n### React typed Functional Component\n\nInvoked via `rfct`.\n\n```\nexport const $1$ = \u003c$2$\u003e(props: PropsWithChildren\u003c$3$\u003e) =\u003e {\n    return (\n        \u003c$4$\u003e\n            $END$\n        \u003c/$4$\u003e\n    );\n};\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n|`2`|`-`||false|\n|`3`|`-`||false|\n|`4`|`-`||false|\n\n### React forward Ref\n\nInvoked via `rfr`.\n\n```\nexport const $COMP$ = React.forwardRef\u003cHTML$ELEMENT_TYPE$ | null, $PROPS$\u003e((props, ref) =\u003e {\n    const elementRef = useRef\u003cHTML$ELEMENT_TYPE$\u003e(null);\n    useImperativeHandle\u003cHTML$ELEMENT_TYPE$ | null, HTML$ELEMENT_TYPE$ | null\u003e(\n        ref,\n        () =\u003e elementRef.current \u0026\u0026 {\n            ...elementRef.current,\n        },\n    );\n    $END$\n    return (\n        \u003c$INNER_COMP$ ref={elementRef} /\u003e\n    );\n});\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`COMP`|`-`||false|\n|`ELEMENT_TYPE`|`completeSmart()`||false|\n|`PROPS`|`-`|{}|false|\n|`INNER_COMP`|`completeSmart()`||false|\n\n### TypeScript Interface\n\nInvoked via `int`.\n\n```\nexport interface $1$ {\n    $END$\n}\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n\n### TypeScript Type\n\nInvoked via `type`.\n\n```\nexport type $1$ = {\n    $END$\n}\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n\n### Anonymous arrow function\n\nInvoked via `arr`.\n\n```\n($1$) =\u003e $2$\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n|`2`|`-`||false|\n\n### JSX element\n\nInvoked via `el`.\n\n```\n\u003c$ELEMENT$PROPS$\u003e\n    $END$\n\u003c/$ELEMENT$\u003e\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`ELEMENT`|`-`|div|false|\n|`PROPS`|`-`||false|\n\n### React create new Context with type, hook and provider\n\nInvoked via `rcctx`.\n\n```\ntype $CONTEXT_NAME_TYPE$ContextType = {\n    $END$\n};\n\nconst $CONTEXT_NAME$Context = React.createContext\u003c$CONTEXT_NAME$ContextType\u003e($DEFAULT_VALUE$);\nexport const use$CONTEXT_NAME_HOOK$ = () =\u003e React.useContext($CONTEXT_NAME$Context);\n\nexport const $CONTEXT_NAME_PROVIDER$Provider: React.FC = props =\u003e {\n    return (\n        \u003c$CONTEXT_NAME$Context.Provider value={$VAL$}\u003e\n            {props.children}\n        \u003c/$CONTEXT_NAME$Context.Provider\u003e\n    );\n};\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`CONTEXT_NAME`|`-`||false|\n|`CONTEXT_NAME_TYPE`|`CONTEXT_NAME`||false|\n|`DEFAULT_VALUE`|`-`|{}|false|\n|`CONTEXT_NAME_HOOK`|`capitalize(CONTEXT_NAME)`||false|\n|`CONTEXT_NAME_PROVIDER`|`capitalize(CONTEXT_NAME)`||false|\n|`VAL`|`-`|{}|false|\n\n### import fs\n\nInvoked via `ifs`.\n\n```\nimport fs from 'fs';\n```\n\n### import path\n\nInvoked via `ipath`.\n\n```\nimport path from 'path';\n```\n\n### Arrow function variable\n\nInvoked via `funarr`.\n\n```\nconst $VAR_NAME$ = ($PARAM$) =\u003e $END$;\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`VAR_NAME`|`jsSuggestVariableName()`||false|\n|`PARAM`|`-`||false|\n\n### Function\n\nInvoked via `fun`.\n\n```\nfunction $FUNCTION_NAME$($PARAM$) {\n    $END$\n}\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`FUNCTION_NAME`|`-`||false|\n|`PARAM`|`-`||false|\n\n### Async anonymous arrow function\n\nInvoked via `asyncarr`.\n\n```\nasync ($1$) =\u003e $2$\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`1`|`-`||false|\n|`2`|`-`||false|\n\n### New Promise\n\nInvoked via `prom`.\n\n```\nnew Promise\u003c$TYPE$((res, rej) =\u003e {\n    $END$\n});\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`TYPE`|`-`|void|false|\n\n### setTimeout\n\nInvoked via `timeout`.\n\n```\nsetTimeout(() =\u003e $END$, $TIME$);\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`TIME`|`completeSmart()`||false|\n\n### setInterval\n\nInvoked via `interval`.\n\n```\nsetInterval(() =\u003e $END$, $TIME$);\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`TIME`|`completeSmart()`||false|\n\n### React.useMemo()\n\nInvoked via `usem`.\n\n```\nconst $VAR$ = useMemo(() =\u003e $RETURN$, [$DEP$]);\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`RETURN`|`completeSmart()`||false|\n|`DEP`|`completeSmart()`||false|\n|`VAR`|`-`||false|\n\n### React.useCallback()\n\nInvoked via `usec`.\n\n```\nconst $VAR$ = useCallback(() =\u003e $RETURN$, [$DEP$]);\n```\nVariables:\n\n|Name|Expression|Default Value|Skip if defined|\n|----|----------|-------------|---------------|\n|`RETURN`|`completeSmart()`||false|\n|`DEP`|`completeSmart()`||false|\n|`VAR`|`-`||false|\n\n\n## Contributions\n\nFeel free to contribute to existing or new templates with issues or pull requests.\n\nTo test if your changes are working, clone the repo and run the gradle script `runIde`.\n\nDo not update the documentation in the readme.md or plugin.xml files, they are updated\nautomatically.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasbach%2Fintellij-ts-react-livetemplates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasbach%2Fintellij-ts-react-livetemplates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasbach%2Fintellij-ts-react-livetemplates/lists"}