STRX Animation IntelliSense
IntelliSense support for react-native-strx animation tokens in VS Code.
This extension provides autocomplete suggestions for animate="" attributes used by STRX animation components.
It is designed for developers using Tailwind-style declarative animation tokens with react-native-strx.
Features
- Autocomplete for STRX animation preset tokens
- Suggestions inside
animate="", animate='', and template string attributes
- Supports JavaScript, TypeScript, JSX, and TSX files
- Supports preset tokens such as
fade-in, slide-up, scale-in, and bounce
- Supports layout animation tokens such as
layout-linear, layout-spring, and layout-fade
- Supports transition tokens such as
transition-all, transition-opacity, and transition-transform
- Supports timing tokens such as
duration-300, delay-150, repeat-1, and ease-out
- Supports modifier-style tokens such as
from:, to:, and exit:
- Supports utility suggestions for opacity, transform, rotation, width, and height tokens
- Provides snippet-style numeric placeholders for custom tokens such as
duration-${number}, translate-y-${number}, and rotate-${number}
Example
import { Strx } from "react-native-strx";
export function Example() {
return (
<Strx.View animate="fade-in slide-up transition-all duration-300 ease-out">
<Strx.Text animate="from:opacity-0 to:opacity-100 duration-500">
Hello STRX
</Strx.Text>
</Strx.View>
);
}
Modifier Example
When you type from:, to:, or exit:, the extension suggests utility tokens with the selected modifier prefix.
<Strx.View animate="from:opacity-0 from:translate-y-16 to:opacity-100 to:translate-y-0 duration-300 ease-out" />
Supported Base Tokens
Presets
fade-in
fade-out
slide-up
slide-down
slide-left
slide-right
scale-in
scale-out
scale-up
scale-down
bounce
Layout
layout-linear
layout-spring
layout-fade
layout-spring-stiff
layout-spring-bouncy
Transition
transition
transition-all
transition-colors
transition-opacity
transition-transform
transition-spacing
transition-layout
Timing
duration-75
duration-100
duration-150
duration-200
duration-250
duration-300
duration-500
duration-700
duration-1000
delay-75
delay-100
delay-150
delay-200
delay-300
delay-500
repeat-1
repeat-2
repeat-3
repeat-infinite
linear
ease
ease-in
ease-out
ease-in-out
Modifier Prefixes
from:
to:
exit:
Supported Utility Tokens
Utility tokens are suggested after from:, to:, or exit:.
Opacity
opacity-0
opacity-5
opacity-10
opacity-15
opacity-20
opacity-25
opacity-30
opacity-35
opacity-40
opacity-45
opacity-50
opacity-55
opacity-60
opacity-65
opacity-70
opacity-75
opacity-80
opacity-85
opacity-90
opacity-95
opacity-100
opacity-${number}
translate-x-${number}
-translate-x-${number}
translate-y-${number}
-translate-y-${number}
scale-${number}
scale-x-${number}
scale-y-${number}
rotate-${number}
-rotate-${number}
Dimension
w-${number}
h-${number}
Numeric Placeholder Suggestions
The extension includes snippet-style suggestions for custom numeric tokens.
For example, selecting:
from:translate-y-${number}
inserts:
from:translate-y-16
with 16 selected, so you can immediately replace it with your desired value.
The same behavior is available for tokens such as:
duration-${number}
delay-${number}
repeat-${number}
opacity-${number}
translate-x-${number}
translate-y-${number}
scale-${number}
rotate-${number}
w-${number}
h-${number}
The extension detects STRX animation tokens inside these forms:
<Strx.View animate="fade-in duration-300" />
<Strx.View animate='fade-in duration-300' />
<Strx.View animate={`fade-in duration-300`} />
<Strx.View animate={"fade-in duration-300"} />
Recommended VS Code Settings
For the cleanest autocomplete experience inside string attributes, you may want to add the following settings to your workspace .vscode/settings.json.
{
"editor.quickSuggestions": {
"other": "on",
"comments": "off",
"strings": "on"
},
"editor.wordBasedSuggestions": "off",
"editor.snippetSuggestions": "none",
"editor.suggestSelection": "first"
}
These settings reduce unrelated word-based and snippet suggestions, making STRX animation token suggestions appear more like Tailwind-style IntelliSense.
Requirements
This extension is designed for projects using react-native-strx.
Install the library in your React Native project:
npm install react-native-strx
or:
yarn add react-native-strx
Release Notes
0.0.1
Initial release.
- Added autocomplete support for STRX animation tokens
- Added support for
animate="", animate='', template string, and expression string attributes
- Added preset, layout, transition, timing, and modifier token suggestions
- Added opacity utility suggestions
- Added snippet-style numeric placeholder suggestions for transform, dimension, timing, and opacity tokens
License
MIT
