WebStorm functional snippet React - reactjs

Question

Does anybody knows what the shortcut is for React functional components snippet in WebStorm?
So far I only found shortcut for class components.

Answer 1

Please try rsf - it creates a code like
import React from 'react';
function Func(props) {
return (<div></div>);
}
export default Func;

Answer 2

I use the rsc live template a lot for new components.
This creates code like:
import React from 'react';
const MyComponent = () => {
return (
<div>
</div>
);
};
export default MyComponent;
Apart from that I created my own live template in the JavaScript category for creating arrow functions to save even more time, which creates code like:
const myFunction = () => {
};
Just add a new Live Template under the JavaScript category with this template text:
const $1$ = () => {
$END$
};
And make sure to set applicable in to JavaScript and TypeScript and select the checkboxes for:
statement
top level statement

Answer 3

i. rsf - Creates a stateless React component as a named function without PropTypes.
import React from 'react';
function AppComponent(props) {
return (
<div></div>
);
}
export default AppComponent;
ii. rsfp - Creates a stateless React component as a named function with PropTypes.
import React from 'react';
import PropTypes from 'prop-types';
AppComponent.propTypes = {
};
function AppComponent(props) {
return (
<div></div>
);
}
export default AppComponent;

Answer 4

You can configure your own templates in the web-storm by your own key word
go to settings -> editor -> live templates
Selecting React, on the right side press the add button or alt + insert to create a new template key bindings are based on Linux system
Click Live template it will open a pane on below
Add your desired abbreviation in my case i wanted a arrow function with export so i added rafce, description is optional
In the live template paste your desired format of code generation for your abbreviation
Example:
// Created on $DATE$ by $USER$: for project $project$
import React from 'react'
const $FileName$ = () => {
return (
<div>$FileName$</div>
)
}
export default $FileName$
${var_name}$ can be used to describe a inbuilt function on the ide or your custom variable
for more reference refer the webstorm documentation on inbuilt functions for live templates webstorm live templates
You can edit these variable declarations on edit variables to get your desired behavior
Variable declaration for above template
Set the application context to java script and type script click save and apply your template is ready