https://github.com/imprisonedmind/reacttailwindtoolbox
Webstorm Live Template for my react workflow
https://github.com/imprisonedmind/reacttailwindtoolbox
livetemplate react tailwindcss webstorm
Last synced: 3 months ago
JSON representation
Webstorm Live Template for my react workflow
- Host: GitHub
- URL: https://github.com/imprisonedmind/reacttailwindtoolbox
- Owner: imprisonedmind
- License: mit
- Created: 2023-09-26T11:34:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-07T13:03:23.000Z (about 1 year ago)
- Last Synced: 2025-01-29T05:23:38.531Z (4 months ago)
- Topics: livetemplate, react, tailwindcss, webstorm
- Homepage:
- Size: 39.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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-generic-shortcuts) |
[React Web Shortcuts](#react-web-shortcuts) |
[NativeWind Shortcuts](#native-wind-shortcuts) |
[Tailwind Shortcuts](#tailwind-shortcuts)
### React Generic Shortcuts
```uses```
Creates a useState with a null value
```tsx
const [state, setState] = useState(null)
```
```usee```
Creates a styled useEffect with no deps
```tsx
useEffect(() => {
}, [])
```
```af```
Creates a styled arrow function
```javascript
const handleSomething = () => {
};
```
### React Web Shortcuts
```rfc```
Creates a simple Functional Component - Uses current filename without extension
```jsx
export default function FileName() {
return (
);
};
```
```rtfc```
Creates a Typed Functional Component - Uses current filename without extension
```tsx
import {FC} from "react";
interface FileNameProps {
prop: string;
}
export const FileName: FC = ({prop}) => {
return (
{prop}
);
};
```
```rtern```
Creates a styled ```TERNARY``` operation for ```
``` rendering with className
```tsx
{
value ? (
) : (
)
}
```
```rand```
Creates a styled ```AND``` operation for ```
``` rendering with className
```tsx
{
value && (
)
}
```
### Native Wind Shortcuts
```nwfc```
Creates a NativeWind Simple Functional Component - Uses current filename without extension
```tsx
import {View, Text} from "react-native";
export default function TestFile() {
return (
);
};
```
```nwtfc```
Creates a NativeWind Typed Functional Component - Uses current filename without extension
```tsx
import {FunctionComponent} from "react";
import {View, Text, ViewStyle} from "react-native";
interface OwnProps {
style: ViewStyle;
}
type Props = OwnProps;
export const ComponentName: FunctionComponent = (props) => {
const {style} = props
return (
);
};
```
```nwview```
Creates a styled NativeWind `````` with ClassName
```tsx
```
```nwtext```
Creates a styled NativeWind `````` with ClassName
```tsx
```
```nwtern```
Creates a styled ```TERNARY``` operation for `````` rendering with className
```tsx
{
value ? (
) : (
)
}
```
```nwand```
Creates a styled ```AND``` operation for `````` rendering with className
```tsx
{
value && ()
}
```
### Tailwind Shortcuts
```twdiv```
Creates a styled div with flex
```tsx
```
```twrow```
Creates a styled row
```tsx
```
```twcol```
Creates a styled column
```tsx
```
```twtern```
Creates an ```in line TERNARY``` operation for ```class``` styling based
on a ```value```
```tsx
${value ? "" : ""}
```
```twor```
Creates an ```in line OR``` operation for ```class``` styling based on a ```nullable
value```
```tsx
${value || ""}
```
```twand```
Creates an ```in line AND``` operation for ```class``` styling based on a ```value```
```tsx
${value && ""}
```