Helpful .tsx Snippets

Setup

In VSCode go to cmd+opt+p -> Preferences: Configure User Snippets -> typescriptreact.json

TypeScript React Functional Component

https://snippet-generator.app/?description=TypeScript+React+FC&tabtrigger=tsrfc&snippet=import+React+from+%27react%27%0A%0Aconst+%241%3A+React.FC%3CProps%3E+%3D+%28%29+%3D%3E+%7B%0A++return+%28%0A++++%3Cdiv%3E%0A++++++%0A++++%3C%2Fdiv%3E%0A++%29%0A%7D%0A%0Atype+Props+%3D+%7B%0A++%0A%7D%0A%0Aexport+default+%241%0A&mode=vscode

TypeScript React Pure Component (for Remote Types)

https://snippet-generator.app/?description=TypeScript+React+Redux+PC&tabtrigger=tsrreduxpc&snippet=import+%7B+bindActionCreators%2C+Dispatch+%7D+from+%27redux%27%0Aimport+%7B+connect%2C+ConnectedProps+%7D+from+%27react-redux%27%0Aimport+%7B+RootState+%7D+from+%27data%2FrootReducer%27%0Aimport+React%2C+%7B+PureComponent+%7D+from+%27react%27%0A%0Aimport+%7B+actions+%7D+from+%27data%27%0Aimport+%7B+ExtractSuccess+%7D+from+%27core%2Ftypes%27%0Aimport+%7B+getData+%7D+from+%27.%2Fselectors%27%0A%0Aclass++extends+PureComponent%3CProps%3E+%7B%0A++state+%3D+%7B%7D%0A%0A++render+%28%29+%7B%0A++++return+%3Cdiv+%2F%3E%0A++%7D%0A%7D%0A%0Aconst+mapStateToProps+%3D+%28state%3A+RootState%29+%3D%3E+%28%7B%0A++data%3A+getData%28state%29%0A%7D%29%0A%0Aconst+mapDispatchToProps+%3D+%28dispatch%3A+Dispatch%29+%3D%3E+%28%7B%7D%29%0A%0Aconst+connector+%3D+connect%28%0A++mapStateToProps%2C%0A++mapDispatchToProps%0A%29%0A%0Atype+OwnProps+%3D+%7B%7D%0Aexport+type+SuccessStateType+%3D+ExtractSuccess%3CReturnType%3Ctypeof+getData%3E%3E%0Aexport+type+Props+%3D+OwnProps+%26+ConnectedProps%3Ctypeof+connector%3E%0A%0Aexport+default+connector%28%29&mode=vscode

In VSCode go to cmd+opt+p -> Preferences: Configure User Snippets -> typescript.json

selectors.ts

https://snippet-generator.app/?description=TypeScript+Selectors&tabtrigger=tsselectors&snippet=import+%7B+ExtractSuccess+%7D+from+%27core%2Ftypes%27%0Aimport+%7B+lift+%7D+from+%27ramda%27%0Aimport+%7B+RootState+%7D+from+%27data%2FrootReducer%27%0A%0Aimport+%7B+selectors+%7D+from+%27data%27%0A%0Aexport+const+getData+%3D+%28state%3A+RootState%29+%3D%3E+%7B%0A++%241%0A++return+lift%28%28%29+%3D%3E+%28%7B%0A++++%0A++%7D%29%29%28%29%0A%7D%0A&mode=vscode