Webstorm Live Templates

React-IndexExport.jsx

// Code: edf
// Desc: For export components using index
export { default } from '.$END$';

React.jsx

// Code: rfc
// Desc: Functional Component Expression
import React from 'react';

const $Component$ = () => {
  return (
    <div>
      <p>test$END$</p>
    </div>
  );
}

export default $Component$;

ReactNative.jsx

// Code: rnx
// Desc: Basic RN Functional Component
import React, { useState, useEffect } from 'react'
import { Text, StyleSheet, View } from 'react-native'

export default function $Component$() {
    return (
      <View style={styles.mainWrap}>
        <Text> $Component$ screen </Text>
      </View>
    )
}

// Styles for this $Component$
const styles = StyleSheet.create({
    mainWrap: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
})
$END$

ReactNativeTypescript.jsx

// Code: rnxt
// Desc: RN Functional Component with Typescript
import React, { useState, useEffect } from 'react'
import { Text, StyleSheet, View } from 'react-native'

interface Props {
    test?: string;
}

export default function $Component$({ test }: Props) {
    return (
      <View>
        <Text> $Component$ view </Text>
      </View>
    )
}

// Styles for this $Component$
const styles = StyleSheet.create({
    mainWrap: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
})
$END$

ReactTypescript.jsx

// Code: rfet
// Desc: Funtional Component Expression with TypeScript minimal
import React from 'react';

// interface Props {}

const $Component$ = (): React.ReactElement => {
  return (
    <div>
      <p>test$END$</p>
    </div>
  );
}

export default $Component$;

ReactTypescriptPlus.jsx

// Code: rfet+
// Desc: Funtional Component Expression with TS and interface defaults
import React, { FC, ReactNode } from 'react';

interface Props {
  children?: ReactNode;
  title?: string;
  on?: boolean;
  size?: number;
  getName?: () => {};
}

const $Component$ = ({ children, title, on, size, getName }: Props): React.ReactElement => {
  return (
    <div>
      <p>test$END$</p>
    </div>
  );
}

export default $Component$;