├── .gitignore
├── images
    ├── 1.jpg
    ├── 2.jpg
    └── 3.gif
├── src
    └── com
    │   └── jinsihou
    │       └── react
    │           └── snippets
    │               └── ReactTemplateProvider.java
├── LICENSE
├── resources
    ├── META-INF
    │   └── plugin.xml
    └── liveTemplates
    │   └── React.xml
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | out
3 | *.jar
4 | 


--------------------------------------------------------------------------------
/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinsihou19/ReactSnippets/HEAD/images/1.jpg


--------------------------------------------------------------------------------
/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinsihou19/ReactSnippets/HEAD/images/2.jpg


--------------------------------------------------------------------------------
/images/3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinsihou19/ReactSnippets/HEAD/images/3.gif


--------------------------------------------------------------------------------
/src/com/jinsihou/react/snippets/ReactTemplateProvider.java:
--------------------------------------------------------------------------------
 1 | package com.jinsihou.react.snippets;
 2 | 
 3 | 
 4 | import com.intellij.codeInsight.template.TemplateActionContext;
 5 | import com.intellij.codeInsight.template.TemplateContextType;
 6 | import org.jetbrains.annotations.NotNull;
 7 | 
 8 | /**
 9 |  * @author jinsihou
10 |  * @date 2017/10/18
11 |  */
12 | public class ReactTemplateProvider extends TemplateContextType {
13 |     protected ReactTemplateProvider() {
14 |         super("REACT", "React");
15 |     }
16 | 
17 |     @Override
18 |     public boolean isInContext(@NotNull TemplateActionContext templateActionContext) {
19 |         String name = templateActionContext.getFile().getName();
20 |         return name.endsWith(".js") || name.endsWith(".jsx") || name.endsWith(".html") || name.endsWith(".ts");
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 jinsihou19
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/resources/META-INF/plugin.xml:
--------------------------------------------------------------------------------
 1 | <idea-plugin>
 2 |     <id>com.jinsihou.react.snippets</id>
 3 |     <name>React snippets</name>
 4 |     <version>1.1.1</version>
 5 |     <vendor email="jinsihou.1992@qq.com">jinsihou</vendor>
 6 | 
 7 |     <description><![CDATA[
 8 |       Live Templates For React<br>
 9 |       Show details in Preferences -> Editor -> Live Templates -> React Group.
10 |     ]]></description>
11 | 
12 |     <change-notes><![CDATA[
13 |       <strong>v1.1.1</strong> <br/>
14 |       <li>Migrate deprecated APIs to support hot deployment</li>
15 |       <strong>v1.1.0</strong> <br/>
16 |       <li> Supported react 16.8.0 hooks</li>
17 |       <li> add cref snippet</li>
18 |       <li> add cctx snippet</li>
19 |       <li> add hoc snippet</li>
20 |       <br/>
21 |       <strong>v1.0.0</strong> <br/>
22 |       <li> Add all the snippets that can be used for prop types.</li>
23 |     ]]>
24 |     </change-notes>
25 | 
26 |     <!-- please see http://www.jetbrains.org/intellij/sdk/docs/basics/getting_started/build_number_ranges.html for description -->
27 |     <idea-version since-build="202.6397.94"/>
28 | 
29 |     <!-- please see http://www.jetbrains.org/intellij/sdk/docs/basics/getting_started/plugin_compatibility.html
30 |          on how to target different products -->
31 |     <!-- uncomment to enable plugin in all products
32 |     <depends>com.intellij.modules.lang</depends>
33 |     -->
34 |     <depends>com.intellij.modules.lang</depends>
35 |     <depends>com.intellij.modules.platform</depends>
36 | 
37 |     <extensions defaultExtensionNs="com.intellij">
38 |         <defaultLiveTemplates file="/liveTemplates/React.xml"/>
39 |         <liveTemplateContext implementation="com.jinsihou.react.snippets.ReactTemplateProvider"/>
40 |     </extensions>
41 | 
42 |     <actions>
43 |         <!-- Add your actions here -->
44 |     </actions>
45 | 
46 | </idea-plugin>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ReactSnippets
 2 | Live Templates for React in IntelliJ products webstorm and idea.
 3 | 
 4 | ![react_snippets](images/3.gif)
 5 | 
 6 | ![react_snippets](images/1.jpg)
 7 | 
 8 | ![react_snippets](images/2.jpg)
 9 | 
10 | | Trigger | Content |
11 | | --- | --- |
12 | | `rcc` | class component skeleton |
13 | | `rrc` | class component skeleton with react-redux connect |
14 | | `rccp` | class component skeleton with prop types after the class |
15 | | `rcfc` | class component skeleton that contains all the lifecycle methods |
16 | | `rsc` | stateless component skeleton |
17 | | `rscp` | stateless component with prop types skeleton |
18 | | `pt` | empty propTypes declaration |
19 | | `con` | class default constructor with props |
20 | | `conc` | class default constructor with props and context |
21 | | `cwm` | `componentWillMount` method |
22 | | `cdm` | `componentDidMount` method |
23 | | `cwr` | `componentWillReceiveProps` method |
24 | | `scu` | `shouldComponentUpdate` method |
25 | | `cwup` | `componentWillUpdate` method |
26 | | `cdup` | `componentDidUpdate` method |
27 | | `cwun` | `componentWillUnmount` method |
28 | | `ren` | `render` method |
29 | | `bind` | binds the `this` of method inside the constructor |
30 | | `hoc` | higher-order component |
31 | | `cref` | creates a ref. |
32 | | `cctx` | creates a context |
33 | 
34 | Add all the snippets that can be used for prop types.
35 | 
36 | | Trigger | Content |
37 | | --- | --- |
38 | | `pta` | `PropTypes.array,` |
39 | | `ptar` | `PropTypes.array.isRequired,` |
40 | | `ptb` | `PropTypes.bool,` |
41 | | `ptbr` | `PropTypes.bool.isRequired,` |
42 | | `ptf` | `PropTypes.func,` |
43 | | `ptfr` | `PropTypes.func.isRequired,` |
44 | | `ptn` | `PropTypes.number,` |
45 | | `ptnr` | `PropTypes.number.isRequired,` |
46 | | `pto` | `PropTypes.object,` |
47 | | `ptor` | `PropTypes.object.isRequired,` |
48 | | `pts` | `PropTypes.string,` |
49 | | `ptsr` | `PropTypes.string.isRequired,` |
50 | | `ptnd` | `PropTypes.node,` |
51 | | `ptndr` | `PropTypes.node.isRequired,` |
52 | | `ptel` | `PropTypes.element,` |
53 | | `ptelr` | `PropTypes.element.isRequired,` |
54 | | `pti` | `PropTypes.instanceOf(ClassName),` |
55 | | `ptir` | `PropTypes.instanceOf(ClassName).isRequired,` |
56 | | `pte` | `PropTypes.oneOf(['News', 'Photos']),` |
57 | | `pter` | `PropTypes.oneOf(['News', 'Photos']).isRequired,` |
58 | | `ptet` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]),` |
59 | | `ptetr` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,` |
60 | | `ptao` | `PropTypes.arrayOf(PropTypes.number),` |
61 | | `ptaor` | `PropTypes.arrayOf(PropTypes.number).isRequired,` |
62 | | `ptoo` | `PropTypes.objectOf(PropTypes.number),` |
63 | | `ptoor` | `PropTypes.objectOf(PropTypes.number).isRequired,` |
64 | | `ptsh` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),` |
65 | | `ptshr` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,` |
66 | 
67 | Hooks
68 | 
69 | All hooks from [official docs](https://reactjs.org/docs/hooks-reference.html) are supported with hook name prefix.
70 | 


--------------------------------------------------------------------------------
/resources/liveTemplates/React.xml:
--------------------------------------------------------------------------------
  1 | <templateSet group="React">
  2 |     <template name="rccp"
  3 |               value="import React, { Component } from 'react';&#10;import PropTypes from 'prop-types';&#10;&#10;class $componentName$ extends Component {&#10;    render() {&#10;        return (&#10;            &lt;div&gt;&#10;                $END$&#10;            &lt;/div&gt;&#10;        );&#10;    }&#10;}&#10;&#10;$componentName$.propTypes = {&#10;&#10;};&#10;&#10;export default $componentName$;&#10;"
  4 |               description="Creates a React component class with PropTypes and ES6 module system" toReformat="true"
  5 |               toShortenFQNames="true">
  6 |         <variable name="componentName" expression="" defaultValue="&quot;MyComponent&quot;" alwaysStopAt="true"/>
  7 |         <context/>
  8 |     </template>
  9 |     <template name="rrc"
 10 |               value="import React, { Component } from 'react';&#10;import { connect } from 'react-redux';&#10;   &#10;class $componentName$ extends Component {&#10;    render() {&#10;        return (&#10;            &lt;div&gt;&#10;                $END$&#10;            &lt;/div&gt;&#10;        );&#10;    }&#10;}&#10; &#10;function mapStateToProps(state) {&#10;    return {&#10;    &#10;    };&#10;}   &#10;    &#10;export default connect(&#10;    mapStateToProps,&#10;)($componentName$);&#10;"
 11 |               description="Creates a React component class connected to redux" toReformat="true"
 12 |               toShortenFQNames="true">
 13 |         <variable name="componentName" expression="" defaultValue="&quot;MyComponent&quot;" alwaysStopAt="true"/>
 14 |         <context>
 15 |             <option name="TypeScript" value="true"/>
 16 |         </context>
 17 |     </template>
 18 |     <template name="rcfc"
 19 |               value="import React, { Component } from 'react';&#10;import PropTypes from 'prop-types';&#10;&#10;class $componentName$ extends Component {&#10;    constructor(props) {&#10;        super(props);&#10;    }&#10;    &#10;    componentWillMount() {&#10;    &#10;    }&#10;    &#10;    componentDidMount() {&#10;    &#10;    }&#10;    &#10;    componentWillReceiveProps(nextProps) {&#10;    &#10;    }&#10;    &#10;    shouldComponentUpdate(nextProps, nextState) {&#10;    &#10;    }&#10;    &#10;    componentWillUpdate(nextProps, nextState) {&#10;    &#10;    }&#10;    &#10;    componentDidUpdate(prevProps, prevState) {&#10;    &#10;    }&#10;    &#10;    componentWillUnmount() {&#10;    &#10;    }&#10;    &#10;    render() {&#10;        return (&#10;            &lt;div&gt;&#10;                $END$&#10;            &lt;/div&gt;&#10;        );&#10;    }&#10;}&#10;&#10;$componentName$.propTypes = {&#10;&#10;};&#10;&#10;export default $componentName$;&#10;"
 20 |               description="Creates a React component class with PropTypes and all lifecycle methods and ES6 module system"
 21 |               toReformat="true" toShortenFQNames="true">
 22 |         <variable name="componentName" expression="" defaultValue="&quot;MyComponent&quot;" alwaysStopAt="true"/>
 23 |         <context/>
 24 |     </template>
 25 |     <template name="rsc"
 26 |               value="import React from 'react';&#10;&#10;const $componentName$ = () =&gt; {&#10;    return (&#10;        &lt;div&gt;&#10;            $END$&#10;        &lt;/div&gt;&#10;    );&#10;};&#10;&#10;export default $componentName$;&#10;"
 27 |               description="Creates a stateless React component without PropTypes and ES6 module system"
 28 |               toReformat="true" toShortenFQNames="true">
 29 |         <variable name="componentName" expression="" defaultValue="&quot;MyComponent&quot;" alwaysStopAt="true"/>
 30 |         <context/>
 31 |     </template>
 32 |     <template name="rscp"
 33 |               value="import React from 'react';&#10;import PropTypes from 'prop-types';&#10;&#10;const $componentName$ = props =&gt; {&#10;    return (&#10;        &lt;div&gt;&#10;            &#10;        &lt;/div&gt;&#10;    );&#10;};&#10;&#10;$componentName$.propTypes = {&#10;    $END$&#10;};&#10;&#10;export default $componentName$;&#10;"
 34 |               description="Creates a stateless React component with PropTypes and ES6 module system" toReformat="true"
 35 |               toShortenFQNames="true">
 36 |         <variable name="componentName" expression="" defaultValue="&quot;MyComponent&quot;" alwaysStopAt="true"/>
 37 |         <context/>
 38 |     </template>
 39 |     <template name="con" value="constructor(props) {&#10;    super(props);&#10;    $END$&#10;}&#10;"
 40 |               description="Adds a default constructor for the class that contains props as arguments" toReformat="true"
 41 |               toShortenFQNames="true">
 42 |         <context/>
 43 |     </template>
 44 |     <template name="conc" value="constructor(props, context) {&#10;    super(props, context);&#10;    $END$&#10;}&#10;"
 45 |               description="Adds a default constructor for the class that contains props and context as arguments"
 46 |               toReformat="true" toShortenFQNames="true">
 47 |         <context/>
 48 |     </template>
 49 |     <template name="cwm" value="componentWillMount() {&#10;    $END$&#10;}&#10;"
 50 |               description="Invoked once, both on the client and server, immediately before the initial rendering occurs"
 51 |               toReformat="true" toShortenFQNames="true">
 52 |         <context/>
 53 |     </template>
 54 |     <template name="cdm" value="&#10;componentDidMount() {&#10;    $END$&#10;}&#10;"
 55 |               description="Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
 56 |               toReformat="true" toShortenFQNames="true">
 57 |         <context/>
 58 |     </template>
 59 |     <template name="cwr" value="componentWillReceiveProps(nextProps) {&#10;    $END$&#10;}&#10;"
 60 |               description="Invoked when a component is receiving new props. This method is not called for the initial render."
 61 |               toReformat="true" toShortenFQNames="true">
 62 |         <context/>
 63 |     </template>
 64 |     <template name="scu" value="&#10;shouldComponentUpdate(nextProps, nextState) {&#10;    $END$&#10;}&#10;"
 65 |               description="Invoked before rendering when new props or state are being received." toReformat="true"
 66 |               toShortenFQNames="true">
 67 |         <context>
 68 |             <option name="JS_EXPRESSION" value="true"/>
 69 |             <option name="JS_STATEMENT" value="true"/>
 70 |         </context>
 71 |     </template>
 72 |     <template name="cwup" value="componentWillUpdate(nextProps, nextState) {&#10;    $END$&#10;}&#10;"
 73 |               description="Invoked immediately before rendering when new props or state are being received."
 74 |               toReformat="true" toShortenFQNames="true">
 75 |         <context/>
 76 |     </template>
 77 |     <template name="cdup" value="&#10;componentDidUpdate(prevProps, prevState) {&#10;    $END$&#10;}&#10;"
 78 |               description="Invoked immediately after the component's updates are flushed to the DOM." toReformat="true"
 79 |               toShortenFQNames="true">
 80 |         <context/>
 81 |     </template>
 82 |     <template name="cwun" value="componentWillUnmount() {&#10;    $END$&#10;}&#10;"
 83 |               description="Invoked immediately before a component is unmounted from the DOM." toReformat="true"
 84 |               toShortenFQNames="true">
 85 |         <context/>
 86 |     </template>
 87 |     <template name="ren"
 88 |               value="&#10;render() {&#10;    return (&#10;        &lt;div&gt;&#10;            $END$&#10;        &lt;/div&gt;&#10;    );&#10;}&#10;"
 89 |               description="When called, it should examine this.props and this.state and return a single child element."
 90 |               toReformat="true" toShortenFQNames="true">
 91 |         <context/>
 92 |     </template>
 93 |     <template name="bind" value="this.$FUNC$ = this.$FUNC$.bind(this);$END$"
 94 |               description="Binds the this of a method. To be used inside a constructor" toReformat="true"
 95 |               toShortenFQNames="true">
 96 |         <variable name="FUNC" expression="" defaultValue="&quot;handleChange&quot;" alwaysStopAt="true"/>
 97 |         <context>
 98 |             <option name="JS_EXPRESSION" value="false"/>
 99 |             <option name="JS_STATEMENT" value="true"/>
100 |         </context>
101 |     </template>
102 |     <template name="pt" value="$componentName$.propTypes = {&#10;    $END$&#10;};&#10;"
103 |               description="Creates empty propTypes declaration" toReformat="false" toShortenFQNames="true">
104 |         <variable name="componentName" expression="" defaultValue="&quot;MyComponent&quot;" alwaysStopAt="true"/>
105 |         <context>
106 |             <option name="JS_EXPRESSION" value="false"/>
107 |             <option name="JS_STATEMENT" value="true"/>
108 |         </context>
109 |     </template>
110 |     <template name="ssf"
111 |               value="&#10;this.setState((state, props) =&gt; { &#10;    return {&#10;        $END$ &#10;    };&#10;});&#10;"
112 |               description="Performs a shallow merge of nextState into current state" toReformat="false"
113 |               toShortenFQNames="true">
114 |         <context/>
115 |     </template>
116 |     <template name="pta" value="PropTypes.array," description="Array prop type" toReformat="false"
117 |               toShortenFQNames="true">
118 |         <context>
119 |             <option name="JS_EXPRESSION" value="false"/>
120 |             <option name="JS_STATEMENT" value="true"/>
121 |         </context>
122 |     </template>
123 |     <template name="ptar" value="PropTypes.array.isRequired," description="Array prop type required" toReformat="false"
124 |               toShortenFQNames="true">
125 |         <context>
126 |             <option name="JS_EXPRESSION" value="true"/>
127 |             <option name="JS_STATEMENT" value="true"/>
128 |         </context>
129 |     </template>
130 |     <template name="ptb" value="PropTypes.bool," description="Bool prop type" toReformat="false"
131 |               toShortenFQNames="true">
132 |         <context>
133 |             <option name="JS_EXPRESSION" value="true"/>
134 |             <option name="JS_STATEMENT" value="true"/>
135 |         </context>
136 |     </template>
137 |     <template name="ptbr" value="PropTypes.bool.isRequired," description="Bool prop type required" toReformat="false"
138 |               toShortenFQNames="true">
139 |         <context>
140 |             <option name="JS_EXPRESSION" value="true"/>
141 |             <option name="JS_STATEMENT" value="true"/>
142 |         </context>
143 |     </template>
144 |     <template name="ptf" value="PropTypes.func," description="Func prop type" toReformat="false"
145 |               toShortenFQNames="true">
146 |         <context>
147 |             <option name="JS_EXPRESSION" value="true"/>
148 |             <option name="JS_STATEMENT" value="true"/>
149 |         </context>
150 |     </template>
151 |     <template name="ptfr" value="PropTypes.func.isRequired," description="Func prop type required" toReformat="false"
152 |               toShortenFQNames="true">
153 |         <context>
154 |             <option name="JS_EXPRESSION" value="true"/>
155 |             <option name="JS_STATEMENT" value="true"/>
156 |         </context>
157 |     </template>
158 |     <template name="ptn" value="PropTypes.number," description="Number prop type" toReformat="false"
159 |               toShortenFQNames="true">
160 |         <context>
161 |             <option name="JS_EXPRESSION" value="true"/>
162 |             <option name="JS_STATEMENT" value="true"/>
163 |         </context>
164 |     </template>
165 |     <template name="ptnr" value="PropTypes.number.isRequired," description="Number prop type required"
166 |               toReformat="false" toShortenFQNames="true">
167 |         <context>
168 |             <option name="JS_EXPRESSION" value="true"/>
169 |             <option name="JS_STATEMENT" value="true"/>
170 |         </context>
171 |     </template>
172 |     <template name="pto" value="PropTypes.object," description="Object prop type" toReformat="false"
173 |               toShortenFQNames="true">
174 |         <context>
175 |             <option name="JS_EXPRESSION" value="true"/>
176 |             <option name="JS_STATEMENT" value="true"/>
177 |         </context>
178 |     </template>
179 |     <template name="ptor" value="PropTypes.object.isRequired," description="Object prop type required"
180 |               toReformat="false" toShortenFQNames="true">
181 |         <context>
182 |             <option name="JS_EXPRESSION" value="true"/>
183 |             <option name="JS_STATEMENT" value="true"/>
184 |         </context>
185 |     </template>
186 |     <template name="pts" value="PropTypes.string," description="String prop type" toReformat="false"
187 |               toShortenFQNames="true">
188 |         <context>
189 |             <option name="JS_EXPRESSION" value="true"/>
190 |             <option name="JS_STATEMENT" value="true"/>
191 |         </context>
192 |     </template>
193 |     <template name="ptsr" value="PropTypes.string.isRequired," description="String prop type required"
194 |               toReformat="false" toShortenFQNames="true">
195 |         <context/>
196 |     </template>
197 |     <template name="ptnd" value="PropTypes.node,"
198 |               description="Anything that can be rendered: numbers, strings, elements or an array" toReformat="false"
199 |               toShortenFQNames="true">
200 |         <context>
201 |             <option name="JS_EXPRESSION" value="true"/>
202 |             <option name="JS_STATEMENT" value="true"/>
203 |         </context>
204 |     </template>
205 |     <template name="ptndr" value="PropTypes.node.isRequired,"
206 |               description="Anything that can be rendered: numbers, strings, elements or an array required"
207 |               toReformat="false" toShortenFQNames="true">
208 |         <context>
209 |             <option name="JS_EXPRESSION" value="true"/>
210 |             <option name="JS_STATEMENT" value="true"/>
211 |         </context>
212 |     </template>
213 |     <template name="ptel" value="PropTypes.element," description="React element prop type" toReformat="false"
214 |               toShortenFQNames="true">
215 |         <context>
216 |             <option name="JS_EXPRESSION" value="true"/>
217 |             <option name="JS_STATEMENT" value="true"/>
218 |         </context>
219 |     </template>
220 |     <template name="ptelr" value="PropTypes.element.isRequired," description="React element prop type required"
221 |               toReformat="false" toShortenFQNames="true">
222 |         <context>
223 |             <option name="JS_EXPRESSION" value="true"/>
224 |             <option name="JS_STATEMENT" value="true"/>
225 |         </context>
226 |     </template>
227 |     <template name="pti" value="PropTypes.instanceOf($END$)," description="Is an instance of a class prop type"
228 |               toReformat="false" toShortenFQNames="true">
229 |         <context>
230 |             <option name="JS_EXPRESSION" value="true"/>
231 |             <option name="JS_STATEMENT" value="true"/>
232 |         </context>
233 |     </template>
234 |     <template name="ptir" value="PropTypes.instanceOf($0).isRequired,"
235 |               description="Is an instance of a class prop type required" toReformat="false" toShortenFQNames="true">
236 |         <context>
237 |             <option name="JS_EXPRESSION" value="true"/>
238 |             <option name="JS_STATEMENT" value="true"/>
239 |         </context>
240 |     </template>
241 |     <template name="pte" value="PropTypes.oneOf(['$END$']),"
242 |               description="Prop type limited to specific values by treating it as an enum" toReformat="true"
243 |               toShortenFQNames="true">
244 |         <context>
245 |             <option name="JS_EXPRESSION" value="true"/>
246 |             <option name="JS_STATEMENT" value="true"/>
247 |         </context>
248 |     </template>
249 |     <template name="pter" value="PropTypes.oneOf(['$END$']).isRequired,"
250 |               description="Prop type limited to specific values by treating it as an enum required" toReformat="true"
251 |               toShortenFQNames="true">
252 |         <context>
253 |             <option name="JS_EXPRESSION" value="true"/>
254 |             <option name="JS_STATEMENT" value="true"/>
255 |         </context>
256 |     </template>
257 |     <template name="ptet" value="PropTypes.oneOfType([&#10;    $END$&#10;]),"
258 |               description="An object that could be one of many types" toReformat="false" toShortenFQNames="true">
259 |         <context>
260 | 
261 |             <option name="JS_EXPRESSION" value="true"/>
262 |             <option name="JS_STATEMENT" value="true"/>
263 |         </context>
264 |     </template>
265 |     <template name="ptetr" value="PropTypes.oneOfType([&#10;    $END$&#10;]).isRequired,"
266 |               description="An object that could be one of many types required" toReformat="false"
267 |               toShortenFQNames="true">
268 |         <context>
269 |             <option name="JS_EXPRESSION" value="true"/>
270 |             <option name="JS_STATEMENT" value="true"/>
271 |         </context>
272 |     </template>
273 |     <template name="ptao" value="PropTypes.arrayOf($END$)," description="An array of a certain type" toReformat="false"
274 |               toShortenFQNames="true">
275 |         <context>
276 |             <option name="JS_EXPRESSION" value="true"/>
277 |             <option name="JS_STATEMENT" value="true"/>
278 |         </context>
279 |     </template>
280 |     <template name="ptaor" value="PropTypes.arrayOf($END$).isRequired,"
281 |               description="An array of a certain type required" toReformat="false" toShortenFQNames="true">
282 |         <context>
283 |             <option name="JS_EXPRESSION" value="true"/>
284 |             <option name="JS_STATEMENT" value="true"/>
285 |         </context>
286 |     </template>
287 |     <template name="ptoo" value="PropTypes.objectOf($END$),"
288 |               description="An object with property values of a certain type" toReformat="false" toShortenFQNames="true">
289 |         <context>
290 |             <option name="JS_EXPRESSION" value="true"/>
291 |             <option name="JS_STATEMENT" value="true"/>
292 |         </context>
293 |     </template>
294 |     <template name="ptoor" value="PropTypes.objectOf($END$).isRequired,"
295 |               description="An object with property values of a certain type required" toReformat="false"
296 |               toShortenFQNames="true">
297 |         <context>
298 |             <option name="JS_EXPRESSION" value="true"/>
299 |             <option name="JS_STATEMENT" value="true"/>
300 |         </context>
301 |     </template>
302 |     <template name="ptsh" value="PropTypes.shape({&#10;    $END$&#10;}),"
303 |               description="An object taking on a particular shape" toReformat="false" toShortenFQNames="true">
304 |         <context>
305 |             <option name="JS_EXPRESSION" value="false"/>
306 |             <option name="TS_EXPRESSION" value="true"/>
307 |         </context>
308 |     </template>
309 |     <template name="ptshr" value="PropTypes.shape({&#10;    $END$&#10;}).isRequired,"
310 |               description="An object taking on a particular shape required" toReformat="false" toShortenFQNames="true">
311 |         <context/>
312 |     </template>
313 |     <template name="rcc"
314 |               value="import React, { Component } from 'react';&#10;&#10;class $TM_FILENAME_BASE$ extends Component {&#10; render() {&#10;  return (&#10;   &lt;div&gt;&#10;    $END$&#10;   &lt;/div&gt;&#10;  );&#10; }&#10;}&#10;&#10;export default $TM_FILENAME_BASE$;"
315 |               description="Creates a A higher-order component" toReformat="true" toShortenFQNames="true">
316 |         <variable name="TM_FILENAME_BASE" expression="capitalize(camelCase(fileNameWithoutExtension()))"
317 |                   defaultValue="&quot;&quot;" alwaysStopAt="true"/>
318 |         <context/>
319 |     </template>
320 |     <template name="useState" value="const [$state$, set$setState$] = useState($initState$);$END$"
321 |               description="useState" toReformat="true" toShortenFQNames="true">
322 |         <variable name="state" expression="" defaultValue="&quot;state&quot;" alwaysStopAt="true"/>
323 |         <variable name="setState" expression="capitalize(state)" defaultValue="" alwaysStopAt="true"/>
324 |         <variable name="initState" expression="" defaultValue="&quot;initState&quot;" alwaysStopAt="true"/>
325 |         <context>
326 |             <option name="JS_EXPRESSION" value="true"/>
327 |             <option name="JS_STATEMENT" value="true"/>
328 |         </context>
329 |     </template>
330 |     <template name="useEffect"
331 |               value="useEffect(() =&gt; {&#10;  return () =&gt; {&#10;    $effect$&#10;  };&#10;}, [$input$]);&#10;$END$"
332 |               description="useEffect" toReformat="true" toShortenFQNames="true">
333 |         <variable name="effect" expression="" defaultValue="&quot;effect&quot;" alwaysStopAt="true"/>
334 |         <variable name="input" expression="" defaultValue="&quot;input&quot;" alwaysStopAt="true"/>
335 |         <context>
336 |             <option name="JS_EXPRESSION" value="true"/>
337 |             <option name="JS_STATEMENT" value="true"/>
338 |         </context>
339 |     </template>
340 |     <template name="useContext" value="const $context$ = useContext($contextValue$);$END$" description="useContext"
341 |               toReformat="true" toShortenFQNames="true">
342 |         <variable name="context" expression="" defaultValue="&quot;context&quot;" alwaysStopAt="true"/>
343 |         <variable name="contextValue" expression="" defaultValue="&quot;contextValue&quot;" alwaysStopAt="true"/>
344 |         <context>
345 |             <option name="JS_EXPRESSION" value="true"/>
346 |             <option name="JS_STATEMENT" value="true"/>
347 |         </context>
348 |     </template>
349 |     <template name="useCallback"
350 |               value="useCallback(&#10;  () =&gt; {&#10;    $callback$&#10;  },&#10;  [$input$],&#10;);&#10;$END$"
351 |               description="useCallback" toReformat="true" toShortenFQNames="true">
352 |         <variable name="callback" expression="" defaultValue="&quot;callback&quot;" alwaysStopAt="true"/>
353 |         <variable name="input" expression="" defaultValue="&quot;input&quot;" alwaysStopAt="true"/>
354 |         <context>
355 |             <option name="JS_EXPRESSION" value="true"/>
356 |             <option name="JS_STATEMENT" value="true"/>
357 |         </context>
358 |     </template>
359 |     <template name="useImperativeHandle"
360 |               value="useImperativeHandle(&#10;  $ref$,&#10;  () =&gt; {&#10;    $handler$&#10;  },&#10;  [$input$],&#10;);&#10;$END$"
361 |               description="useImperativeHandle" toReformat="true" toShortenFQNames="true">
362 |         <variable name="ref" expression="" defaultValue="&quot;ref&quot;" alwaysStopAt="true"/>
363 |         <variable name="handler" expression="" defaultValue="&quot;handler&quot;" alwaysStopAt="true"/>
364 |         <variable name="input" expression="" defaultValue="&quot;input&quot;" alwaysStopAt="true"/>
365 |         <context>
366 |             <option name="JS_EXPRESSION" value="true"/>
367 |             <option name="JS_STATEMENT" value="true"/>
368 |         </context>
369 |     </template>
370 |     <template name="useReducer" value="const [state, dispatch] = useReducer($reducer$, $initialState$, $init$);$END$"
371 |               description="useReducer" toReformat="true" toShortenFQNames="true">
372 |         <variable name="reducer" expression="" defaultValue="&quot;reducer&quot;" alwaysStopAt="true"/>
373 |         <variable name="initialState" expression="" defaultValue="&quot;initialState&quot;" alwaysStopAt="true"/>
374 |         <variable name="init" expression="" defaultValue="&quot;init&quot;" alwaysStopAt="true"/>
375 |         <context>
376 |             <option name="JS_EXPRESSION" value="true"/>
377 |             <option name="JS_STATEMENT" value="true"/>
378 |         </context>
379 |     </template>
380 |     <template name="useMemo" value="useMemo(() =&gt; $function$, $input$);$END$" description="useMemo" toReformat="true"
381 |               toShortenFQNames="true">
382 |         <variable name="function" expression="" defaultValue="&quot;function&quot;" alwaysStopAt="true"/>
383 |         <variable name="input" expression="" defaultValue="&quot;input&quot;" alwaysStopAt="true"/>
384 |         <context>
385 |             <option name="JS_EXPRESSION" value="true"/>
386 |             <option name="JS_STATEMENT" value="true"/>
387 |         </context>
388 |     </template>
389 |     <template name="useRef" value="const $ref$ = useRef($initialValue$);$END$" description="useRef" toReformat="true"
390 |               toShortenFQNames="true">
391 |         <variable name="ref" expression="" defaultValue="&quot;ref&quot;" alwaysStopAt="true"/>
392 |         <variable name="initialValue" expression="" defaultValue="&quot;initialValue&quot;" alwaysStopAt="true"/>
393 |         <context>
394 |             <option name="JS_EXPRESSION" value="true"/>
395 |             <option name="JS_STATEMENT" value="true"/>
396 |         </context>
397 |     </template>
398 |     <template name="useLayoutEffect"
399 |               value="useLayoutEffect(() =&gt; {&#10;  return () =&gt; {&#10;    $effect$&#10;  },&#10;  [$input$]&#10;});&#10;$END$"
400 |               description="useLayoutEffect" toReformat="true" toShortenFQNames="true">
401 |         <variable name="effect" expression="" defaultValue="&quot;effect&quot;" alwaysStopAt="true"/>
402 |         <variable name="input" expression="" defaultValue="&quot;input&quot;" alwaysStopAt="true"/>
403 |         <context>
404 |             <option name="JS_EXPRESSION" value="true"/>
405 |             <option name="JS_STATEMENT" value="true"/>
406 |         </context>
407 |     </template>
408 |     <template name="useDebugValue" value="useDebugValue($value$);$END$" description="useDebugValue" toReformat="true"
409 |               toShortenFQNames="true">
410 |         <variable name="value" expression="" defaultValue="&quot;value&quot;" alwaysStopAt="true"/>
411 |         <context>
412 |             <option name="JS_EXPRESSION" value="true"/>
413 |             <option name="JS_STATEMENT" value="true"/>
414 |         </context>
415 |     </template>
416 |     <template name="cref" value="this.$refName$Ref = React.createRef();$END$" description="Creates a ref"
417 |               toReformat="true" toShortenFQNames="true">
418 |         <variable name="refName" expression="" defaultValue="&quot;refName&quot;" alwaysStopAt="true"/>
419 |         <context>
420 |             <option name="JS_EXPRESSION" value="true"/>
421 |             <option name="JS_STATEMENT" value="true"/>
422 |         </context>
423 |     </template>
424 |     <template name="cctx" value="const $contextName$ = React.createContext();$END$" description="Creates a context"
425 |               toReformat="true" toShortenFQNames="true">
426 |         <variable name="contextName" expression="" defaultValue="&quot;contextName&quot;" alwaysStopAt="true"/>
427 |         <context>
428 |             <option name="JS_STATEMENT" value="true"/>
429 |         </context>
430 |     </template>
431 |     <template name="hoc"
432 |               value="import React from 'react'&#10;import PropTypes from 'prop-types'&#10;&#10;export default ($WrappedComponent$) =&gt; {&#10;  const $hocComponent$ = ({ ...props }) =&gt; &lt;$WrappedComponent$ {...props} /&gt;&#10;&#10;  $hocComponent$.propTypes = {&#10;  }&#10;&#10;  return $hocComponent$&#10;}"
433 |               description="Creates a React higher-order component" toReformat="true" toShortenFQNames="true">
434 |         <variable name="WrappedComponent" expression="" defaultValue="&quot;WrappedComponent&quot;"
435 |                   alwaysStopAt="true"/>
436 |         <variable name="hocComponent" expression="" defaultValue="&quot;hocComponent&quot;" alwaysStopAt="true"/>
437 |         <context>
438 |             <option name="JS_STATEMENT" value="true"/>
439 |         </context>
440 |     </template>
441 | </templateSet>
442 | 


--------------------------------------------------------------------------------