```
## Usage
### Basic Usage
Import the helper and pass a style object:
```svelte
Click to toggle
```
### With Animations
Combine with `useTime` and `useTransform` for smooth time-based animations:
```svelte
Spinning!
```
### Factory Function Form
You can also pass a factory function if preferred:
```svelte
({
scale,
backgroundColor: `hsl(${hue}, 70%, 50%)`,
width: 150,
height: 150
}))}
>
Dynamic styles
```
### String Values Preserved
String values are kept as-is for custom units or complex values:
```svelte
```
## Reactivity in Svelte 5
In Svelte 5, template expressions are automatically reactive. When you use `$state` variables in a template expression like `style={styleString({ rotate })}`, Svelte tracks the dependency and re-evaluates the expression when `rotate` changes.
This means you don't need any special reactive wrappers - just use `styleString` directly in your templates!
```svelte
Moves with x and y
```
## API Reference
### Import
```typescript
import { styleString } from '@humanspeak/svelte-motion'
```
### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `input` | `StyleObject \| (() => StyleObject)` | A style object or a function returning one |
### Returns
A `string` containing the CSS style declarations.
### Type Definition
```typescript
type StyleObject = Record
function styleString(input: StyleObject | (() => StyleObject)): string
```
## Migration from stringifyStyleObject
The older `stringifyStyleObject` function is deprecated. Migration is simple:
### Before (deprecated)
```svelte
```
### After (recommended)
```svelte
```
The API is nearly identical - just change the import and function name.
## Tips
### Reusing Style Objects
For reusable base styles:
```svelte
```
### Combining with motion Components
Works seamlessly with motion components:
```svelte
Interactive!
```
## See also
- [useTime](/docs/use-time) - Time-based reactive values
- [useTransform](/docs/use-transform) - Transform and map values
- [Examples](/examples) - See styleString in action