Skip to content

Commit ff5949a

Browse files
committed
Add api docs for format
1 parent aee7ba5 commit ff5949a

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,24 @@ An object with `0%` to `100%` keys and the interpolated physics-based values for
120120
```
121121

122122
### `format(keyframes, formatter)`
123+
124+
This method takes the return value of `spring` and formats it to valid css (with corresponding units). As of now, the interpolated key-frame values are unitless because units are stripped at creation. Simple formatters that add `px`, `em` or `rem` units to every property value are available as `format.PX_FORMATTER`, `format.EM_FORMATTER` and `format.REM_FORMATTER`.
125+
126+
#### Arguments
127+
128+
- `keyframes` (_Object_): The interpolated animation values object given by `spring`.
129+
- `formatter` (_Function_, optional, defaults to `format.PX_FORMATTER`): The formatter function that is invoked for every property/value combination.
130+
131+
#### Returns
132+
133+
A formatted css keyframes string.
134+
135+
#### Example
136+
137+
A keyframes object based on `startValues = { opacity: 0, left: '10px' }` and `targetValues = { opacity: 1, left: '20px' }` will have all units (in this case, `px`) removed from the interpolated values. In order to get css with the correct unit for the interpolated `left` values, but no unit for the interpolated `opacity` values, write your own formatter such as this:
138+
139+
```javascript
140+
const keyframeCss = format(mySpring, (key, value) => {
141+
 return `${key}:${value}${key === 'left' ? 'px' : ''};`
142+
});
143+
```

0 commit comments

Comments
 (0)