imprisonedmind/reactTailwindToolBox

Webstorm Live Template for my react workflow

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.

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> = (props) => {
  const { prop } = props;

  return (
    <div className={``}>

    </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 && ""}