React & Tailwind ToolBox

An opinionated React, NativeWind & Tailwind live template for IntelliJ products.
These live templates are created in the way I like to use in my daily work flow, I prefer to have my types at the top of the file and I like to export inline where I declare my component.

Where to put the template.xml

Rename the template to what ever you want to call it i.e. lukesReactToolBox.xml then drop the file into the following location:

/Users/yourUser/Library/Application\Support/JetBrains/WebStorm2023.3/templates/lukesReactToolBox.xml

React Generic Shortcuts | React Web Shortcuts | NativeWind Shortcuts | Tailwind Shortcuts

React Generic Shortcuts

uses Creates a useState with a null value

const [state, setState] = useState(null)

usee Creates a styled useEffect with no deps

useEffect(() => {

}, [])

af Creates a styled arrow function

const handleSomething = () => {

};

React Web Shortcuts

rfc Creates a simple Functional Component - Uses current filename without extension

export default function FileName() {
    return (
    <div className={``}>
    
    </div>
    );
};

rtfc Creates a Typed Functional Component - Uses current filename without extension

import {FC} from "react";

interface FileNameProps {
  prop: string;
}

export const FileName: FC<FileNameProps> = ({prop}) => {

    return (
        <div className={``}>
            {prop}
        </div>
    );
};

rtern Creates a styled TERNARY operation for <div> rendering with className

{
    value ? (
        <div className={``}></div>
    ) : (
        <div className={``}></div>
    )
}

rand Creates a styled AND operation for <div> rendering with className

{
	value && (<div className={``}></div>)
}

Native Wind Shortcuts

nwfc Creates a NativeWind Simple Functional Component - Uses current filename without extension

import {View, Text} from "react-native";

export default function TestFile() {
    return (
        <View className={``}>
    
        </View>
    );
};

nwtfc Creates a NativeWind Typed Functional Component - Uses current filename without extension

import {FunctionComponent} from "react";
import {View, Text, ViewStyle} from "react-native";

interface OwnProps {
  style: ViewStyle;
}

type Props = OwnProps;

export const ComponentName: FunctionComponent<Props> = (props) => {
    const {style} = props
    
    return (
        <View style={style} className={``}>
    
        </View>
    );
};

nwview Creates a styled NativeWind <View> with ClassName

<View className={``}>

</View>

nwtext Creates a styled NativeWind <Text> with ClassName

<Text className={``}>

</Text>

nwtern Creates a styled TERNARY operation for <View> rendering with className

{
	value ? (
		<View className={``}></View>
	) : (
		<View className={``}></View>
	)
}

nwand Creates a styled AND operation for <View> rendering with className

{
	value && (<View className={``}></View>)
}

Tailwind Shortcuts

twdiv Creates a styled div with flex

<div className={`flex`}>

</div>

twrow Creates a styled row

<div className={`flex flex-row gap-4`}>

</div>

twcol Creates a styled column

<div className={`flex flex-col gap-4`}>

</div>

twtern Creates an in line TERNARY operation for class styling based on a value

${value ? "" : ""}

twor Creates an in line OR operation for class styling based on a nullable value

${value || ""}

twand Creates an in line AND operation for class styling based on a value

${value && ""}