physics-animator 0.15.3 → 0.16.0

package/README.md

@@ -24,9 +24,9 @@ useSpringValue(
 Or via state
 
 ```tsx
-const { state: opacity, setTarget } = useSpringState({ initial: 0, duration_s: 0.8 })
+const opacitySpring = useSpringState({ initial: 0, duration_s: 0.8, target: opacity })
 
-return <div style={{ opacity }} />
+return <div style={{ opacity: opacitySpring }} />
 ```
 
 It works with arrays and objects

package/dist/cjs/react/useSpringState.js

@@ -7,15 +7,19 @@ const useSpringValue_js_1 = require("./useSpringValue.js");
  * A value that animates to a target value using a spring animation.
  * This **will** cause a re-render when the value changes.
  *
+ * Usage example:
+ * ```tsx
+ * const opacity = useSpringState({ initial: 0, target: 1, duration_s: 0.8 });
+ * ```
+ *
  * See {@link useSpringValue} for a version that does not cause re-renders.
  */
 function useSpringState(options) {
     const [state, setState] = (0, react_1.useState)(options.initial);
-    const [target, setTarget] = (0, react_1.useState)(options.initial);
     (0, useSpringValue_js_1.useSpringValue)({
         ...options,
         initial: options.initial,
-        target
+        target: options.target,
     }, setState);
-    return { state, target, setTarget };
+    return state;
 }

package/dist/cjs/react/useSpringValue.js

@@ -8,6 +8,15 @@ const react_1 = require("react");
  * A value that animates to a target value using a spring animation.
  * This will **not** cause a re-render when the value changes.
  *
+ * Usage example:
+ * ```tsx
+ * useSpringValue(
+ *    { initial: 0, target: 1, duration_s: 0.8 },
+ *    // onChange
+ *    value => el.style.opacity = value
+ * );
+ * ```
+ *
  * See {@link useSpringState} for a version that does cause re-renders.
  */
 function useSpringValue(options, onChange) {

package/dist/esm/react/useSpringState.js

@@ -4,15 +4,19 @@ import { useSpringValue } from "./useSpringValue.js";
  * A value that animates to a target value using a spring animation.
  * This **will** cause a re-render when the value changes.
  *
+ * Usage example:
+ * ```tsx
+ * const opacity = useSpringState({ initial: 0, target: 1, duration_s: 0.8 });
+ * ```
+ *
  * See {@link useSpringValue} for a version that does not cause re-renders.
  */
 export function useSpringState(options) {
     const [state, setState] = useState(options.initial);
-    const [target, setTarget] = useState(options.initial);
     useSpringValue({
         ...options,
         initial: options.initial,
-        target
+        target: options.target,
     }, setState);
-    return { state, target, setTarget };
+    return state;
 }

package/dist/esm/react/useSpringValue.js

@@ -5,6 +5,15 @@ import { useEffect } from "react";
  * A value that animates to a target value using a spring animation.
  * This will **not** cause a re-render when the value changes.
  *
+ * Usage example:
+ * ```tsx
+ * useSpringValue(
+ *    { initial: 0, target: 1, duration_s: 0.8 },
+ *    // onChange
+ *    value => el.style.opacity = value
+ * );
+ * ```
+ *
  * See {@link useSpringState} for a version that does cause re-renders.
  */
 export function useSpringValue(options, onChange) {

package/dist/types/react/useSpringState.d.ts

@@ -5,6 +5,11 @@ type WidenNumber<T> = T extends number ? number : T;
  * A value that animates to a target value using a spring animation.
  * This **will** cause a re-render when the value changes.
  *
+ * Usage example:
+ * ```tsx
+ * const opacity = useSpringState({ initial: 0, target: 1, duration_s: 0.8 });
+ * ```
+ *
  * See {@link useSpringValue} for a version that does not cause re-renders.
  */
 export declare function useSpringState<T extends number | number[] | {
@@ -12,9 +17,6 @@ export declare function useSpringState<T extends number | number[] | {
 }>(options: {
     animator?: Animator;
     initial: T;
-} & SpringParameters): {
-    readonly state: WidenNumber<T>;
-    readonly target: WidenNumber<T>;
-    readonly setTarget: import("react").Dispatch<import("react").SetStateAction<WidenNumber<T>>>;
-};
+    target: T;
+} & SpringParameters): WidenNumber<T>;
 export {};

package/dist/types/react/useSpringValue.d.ts

@@ -4,6 +4,15 @@ import { SpringParameters } from "../animators/SpringAnimator.js";
  * A value that animates to a target value using a spring animation.
  * This will **not** cause a re-render when the value changes.
  *
+ * Usage example:
+ * ```tsx
+ * useSpringValue(
+ *    { initial: 0, target: 1, duration_s: 0.8 },
+ *    // onChange
+ *    value => el.style.opacity = value
+ * );
+ * ```
+ *
  * See {@link useSpringState} for a version that does cause re-renders.
  */
 export declare function useSpringValue<T extends number | number[] | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "physics-animator",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "author": "haxiomic (George Corney)",
   "license": "MIT",
   "description": "A TypeScript animation system grounded in physics with three.js and react support.",