WebStorm functional snippet React

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