react-ui-animate 4.1.1 → 4.2.0

package/README.md

@@ -6,7 +6,7 @@
 
 ### Install
 
-You can install react-ui-animate via npm or yarn:
+You can install react-ui-animate via `npm` or `yarn`:
 
 ```sh
 npm i react-ui-animate
@@ -24,15 +24,13 @@ The `react-ui-animate` library provides a straightforward way to add animations
 import { animate, useValue } from 'react-ui-animate';
 
 export default function () {
-  // Initialize an animated opacity value
-  const opacity = useValue(0);
+  const opacity = useValue(0); // Initialize
 
   return (
-    <div>
-      {/* animate.div component uses the animated opacity value */}
+    <>
       <animate.div
         style={{
-          opacity: opacity.value, // using opacity with value property
+          opacity: opacity.value, // Apply
           width: 100,
           padding: 20,
           background: '#39F',
@@ -40,39 +38,40 @@ export default function () {
       >
         ANIMATED
       </animate.div>
-
-      {/* Clicking the button changes the opacity smoothly to 1 */}
-      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
-    </div>
+      
+      <button 
+        onClick={() => {
+          opacity.value = 1 // Update
+        }}
+      >
+        Animate Me
+      </button>
+    </>
   );
 }
 ```
 
-In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
+In this example, clicking the `Animate Me` button changes the opacity from 0 to 1.
+
+---
 
-### Key Features
+### Implementation Steps
 
-#### `useValue()`
+#### 1. Initialize
 
 The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
 
 ```javascript
-const opacity = useValue(0); // Start with opacity set to 0
-
-// Use in style
-style={{
-  opacity: opacity.value, // Access the animated opacity value
-}}
-
-// Update the value on user interaction
-onClick={() => (opacity.value = 1)} // Changes the opacity to 1
+const opacity = useValue(0); // Initialize a animation value 0
 ```
 
-#### `animate.div`
+#### 2. Apply
 
 `animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
 
-```javascript
+```jsx
+import { useValue, animate } from 'react-ui-animate'
+
 const width = useValue(100); // Start with a width of 100
 
 <animate.div
@@ -84,6 +83,29 @@ const width = useValue(100); // Start with a width of 100
 />;
 ```
 
+#### 3. Update
+
+To update the value simply assign the initialized animated node with a value.
+
+```jsx
+import { useValue, withSpring } from 'react-ui-animate';
+
+const width = useValue(100);
+
+<button 
+  onClick={() => {
+      // Update
+      width.value = withSpring(400); 
+  }}
+>
+  Update
+</button>
+```
+
+In this example, `withSpring` runs spring animation when updating the value.
+
+---
+
 #### `interpolate`
 
 The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
@@ -91,7 +113,7 @@ The `interpolate()` function is useful for mapping values from one range to anot
 ```javascript
 import { useValue, animate, interpolate } from 'react-ui-animate';
 
-const width = useValue(100); // Start with a width of 100
+const width = useValue(100);
 
 <animate.div
   style={{
@@ -104,7 +126,7 @@ const width = useValue(100); // Start with a width of 100
 
 In this example, as the width changes from 100 to 200, the background color smoothly transitions from red to blue.
 
-#### Dynamic Animations and Sequence Transitions
+#### Modifiers
 
 You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
 
@@ -123,17 +145,9 @@ x.value = withTiming(10, { duration: 5000 });
 To create sequential transitions using the `withSequence` function with dynamic modifiers like `withSpring` and `withTiming`:
 
 ```jsx
-x.value = withSequence([withSpring(50), withTiming(100), 200]);
+x.value = withSequence([withSpring(50), withTiming(100), withEase(200)]);
 ```
 
-To delay an animation using the withDelay function:
-
-```jsx
-x.value = withDelay(1000, withSpring(100));
-```
-
-In this example, a spring animation to `100` will be applied after a 1-second delay.
-
 #### `useMount()`
 
 The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
@@ -144,11 +158,7 @@ import { useMount } from 'react-ui-animate';
 export default function App() {
   const [visible, setVisible] = useState(false);
 
-  const open = useMount(visible, {
-    from: 0,
-    enter: 1,
-    exit: 0,
-  });
+  const open = useMount(visible);
 
   return open((animation, mounted) => mounted && <animate.div />);
 }
@@ -160,6 +170,8 @@ In this example,
 2. The `useMount` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
 3. The `open` function, returned by `useMount`, is used to conditionally render `animate.div` based on the `mounted` boolean and apply the transition animation.
 
+---
+
 ### Gestures
 
 The `react-ui-animate` library also provides several hooks for handling different types of gestures:
@@ -175,13 +187,13 @@ The `react-ui-animate` library also provides several hooks for handling differen
 Here’s an example of using the useDrag hook to enable drag gestures:
 
 ```jsx
-import { useValue, animate, useDrag } from 'react-ui-animate';
+import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';
 
 export const Draggable = () => {
   const translateX = useValue(0);
 
   const bind = useDrag(function ({ down, movementX }) {
-    translateX.value = down ? movementX : 0;
+    translateX.value = down ? movementX : withSpring(0);
   });
 
   return (
@@ -191,7 +203,7 @@ export const Draggable = () => {
         width: 100,
         height: 100,
         backgroundColor: '#3399ff',
-        translateX: translateX.value, // Use translateX with animated value
+        translateX: translateX.value,
       }}
     />
   );

package/dist/animation/controllers/index.d.ts

@@ -1,8 +1,8 @@
-export { withConfig } from './withConfig';
 export { withDecay } from './withDecay';
 export { withDelay } from './withDelay';
-export { withEase } from './withEase';
 export { withSequence } from './withSequence';
 export { withSpring } from './withSpring';
 export { withTiming } from './withTiming';
 export { withLoop } from './withLoop';
+export { withNative } from './withNative';
+export { withEase } from './withEase';

package/dist/animation/controllers/withDecay.d.ts

@@ -1,7 +1,11 @@
-import type { UseValueConfig } from '../hooks';
-import type { WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithDecayConfig extends Pick<UseValueConfig, 'velocity' | 'deceleration'>, WithOnCallbacks {
+import { FluidValue } from '@raidipesh78/re-motion';
+import type { WithCallbacks } from '../types';
+interface WithDecayConfig extends WithCallbacks {
+    velocity?: number;
+    deceleration?: number;
 }
-export declare const withDecay: (config?: WithDecayConfig) => UpdateValue;
+export declare const withDecay: (config?: WithDecayConfig, callback?: (result: any) => void) => (value: FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};
 export {};

package/dist/animation/controllers/withDelay.d.ts

@@ -1,6 +1,4 @@
-import type { UseValueConfig } from '../hooks';
-import type { UpdateValue } from '../core/FluidController';
-export declare const withDelay: (delay: number, animation: {
-    toValue: number;
-    config?: UseValueConfig;
-}) => UpdateValue;
+export declare const withDelay: (ms: number, callback?: (result: any) => void) => () => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};

package/dist/animation/controllers/withEase.d.ts

@@ -1,6 +1,8 @@
-import { type WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithEaseConfig extends WithOnCallbacks {
+import type { WithCallbacks } from '../types';
+interface WithEaseConfig extends WithCallbacks {
 }
-export declare const withEase: (toValue: number, config?: WithEaseConfig) => UpdateValue;
+export declare const withEase: (toValue: number, config?: WithEaseConfig, callback?: (result: any) => void) => (value: import("@raidipesh78/re-motion").FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};
 export {};

package/dist/animation/controllers/withLoop.d.ts

@@ -1,2 +1,8 @@
-import type { UpdateValue } from '../core/FluidController';
-export declare const withLoop: (updateValue: UpdateValue | UpdateValue[], loop: number) => UpdateValue[];
+import { FluidValue, loop } from '@raidipesh78/re-motion';
+export declare const withLoop: (animations: (value: FluidValue) => {
+    controller: ReturnType<typeof loop>;
+    callback?: (result: any) => void;
+}, iterations: number, callback?: (result: any) => void) => (value: FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};

package/dist/animation/controllers/withNative.d.ts

@@ -0,0 +1,5 @@
+import { FluidValue } from '@raidipesh78/re-motion';
+export declare const withNative: (toValue: number | string, callback?: (result: any) => void) => (value: FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};

package/dist/animation/controllers/withSequence.d.ts

@@ -1,2 +1,8 @@
-import { type UpdateValue } from '../core/FluidController';
-export declare const withSequence: (animations: Array<UpdateValue | number | Array<UpdateValue | number>>) => UpdateValue[];
+import { FluidValue, sequence } from '@raidipesh78/re-motion';
+export declare const withSequence: (animations: Array<(value: FluidValue) => {
+    controller: ReturnType<typeof sequence>;
+    callback?: (result: any) => void;
+}>, callback?: (result: any) => void) => (value: FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};

package/dist/animation/controllers/withSpring.d.ts

@@ -1,7 +1,12 @@
-import { type UseValueConfig } from '../hooks';
-import { type WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithSpringConfig extends Pick<UseValueConfig, 'mass' | 'friction' | 'tension'>, WithOnCallbacks {
+import { FluidValue } from '@raidipesh78/re-motion';
+import type { WithCallbacks } from '../types';
+interface WithSpringConfig extends WithCallbacks {
+    mass?: number;
+    friction?: number;
+    tension?: number;
 }
-export declare const withSpring: (toValue: number, config?: WithSpringConfig) => UpdateValue;
+export declare const withSpring: (toValue: number, config?: WithSpringConfig, callback?: (result: any) => void) => (value: FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};
 export {};

package/dist/animation/controllers/withTiming.d.ts

@@ -1,7 +1,11 @@
-import { type UseValueConfig } from '../hooks';
-import { type WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithTimingConfig extends Pick<UseValueConfig, 'duration' | 'easing'>, WithOnCallbacks {
+import { FluidValue } from '@raidipesh78/re-motion';
+import type { WithCallbacks } from '../types';
+interface WithTimingConfig extends WithCallbacks {
+    duration?: number;
+    easing?: (t: number) => number;
 }
-export declare const withTiming: (toValue: number, config?: WithTimingConfig) => UpdateValue;
+export declare const withTiming: (toValue: number, config?: WithTimingConfig, callback?: (result: any) => void) => (value: FluidValue) => {
+    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
+    callback: ((result: any) => void) | undefined;
+};
 export {};

package/dist/animation/helpers/animationType.d.ts

@@ -1,59 +1,63 @@
 import { Easing } from '@raidipesh78/re-motion';
 export declare const AnimationConfig: {
-    ELASTIC: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    BOUNCE: {
-        duration: number;
-        easing: typeof Easing.bounce;
-    };
-    EASE: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    STIFF: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    WOOBLE: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    EASE_IN: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    EASE_OUT: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    EASE_IN_OUT: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    POWER1: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    POWER2: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    POWER3: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    POWER4: {
-        duration: number;
-        easing: (t: number) => number;
-    };
-    LINEAR: {
-        duration: number;
-        easing: typeof Easing.linear;
+    Timing: {
+        BOUNCE: {
+            duration: number;
+            easing: typeof Easing.bounce;
+        };
+        EASE_IN: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        EASE_OUT: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        EASE_IN_OUT: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        POWER1: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        POWER2: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        POWER3: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        POWER4: {
+            duration: number;
+            easing: (t: number) => number;
+        };
+        LINEAR: {
+            duration: number;
+            easing: typeof Easing.linear;
+        };
+    };
+    Spring: {
+        ELASTIC: {
+            mass: number;
+            friction: number;
+            tension: number;
+        };
+        EASE: {
+            mass: number;
+            friction: number;
+            tension: number;
+        };
+        STIFF: {
+            mass: number;
+            friction: number;
+            tension: number;
+        };
+        WOBBLE: {
+            mass: number;
+            friction: number;
+            tension: number;
+        };
     };
 };

package/dist/animation/helpers/getToValue.d.ts

@@ -1,2 +1,2 @@
-import { UpdateValue, UseFluidValueConfig } from '../core/FluidController';
-export declare function getToValue(value: number | string | UpdateValue, config?: UseFluidValueConfig): UpdateValue;
+import { ToValue } from '../types';
+export declare function getToValue(val: string | number | ToValue): ToValue;

package/dist/animation/helpers/index.d.ts

@@ -1,4 +1,2 @@
-export * from './isDefined';
-export * from './delay';
-export * from './getToValue';
 export * from './animationType';
+export * from './getToValue';

package/dist/animation/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export * from './useValue';
-export * from './useValues';
 export * from './useMount';
+export * from './useValues';

package/dist/animation/hooks/useMount.d.ts

@@ -1,15 +1,10 @@
 import { FluidValue } from '@raidipesh78/re-motion';
-import { UseMountConfig as UseInternalMountConfig } from '../core/useMount';
-export interface UseMountConfig extends UseInternalMountConfig {
+import type { ToValue } from '../types';
+export interface UseMountConfig {
+    from?: number;
+    enter?: ToValue;
+    exit?: ToValue;
 }
-/**
- * `useMount` handles mounting and unmounting of a component which captures current state
- * passed as an argument (`state`) and exposes the shadow state which handles the mount and unmount
- * of a component.
- *
- * @param { boolean } state - Boolean indicating the component should mount or unmount.
- * @param { UseMountConfig } config - Animation configuration.
- */
-export declare function useMount(state: boolean, config: UseMountConfig): (cb: (value: {
+export declare const useMount: (state: boolean, config?: UseMountConfig) => (fn: (animation: {
     value: FluidValue;
 }, mounted: boolean) => React.ReactNode) => import("react").ReactNode;

package/dist/animation/hooks/useValue.d.ts

@@ -1,17 +1,7 @@
 import { FluidValue } from '@raidipesh78/re-motion';
-import type { UpdateValue, UseFluidValueConfig } from '../core/FluidController';
-export interface UseValueConfig extends UseFluidValueConfig {
-}
-/**
- * `useValue` returns an animation value with `.value` and `.currentValue` property which is
- * initialized when passed to argument (`initialValue`). The returned value persist until the lifetime of
- * a component. It doesn't cast any re-renders which can is very good for performance optimization.
- *
- * @param { number } initialValue - Initial value
- * @param { UseValueConfig } config - Animation configuration object.
- */
-export declare function useValue<T extends number | string>(initialValue: T, config?: UseValueConfig): {
+import type { ToValue } from '../types';
+export declare function useValue(initialValue: number | string): {
     get value(): FluidValue;
-    set value(to: number | string | UpdateValue | number[] | UpdateValue[]);
+    set value(to: number | string | ToValue);
     readonly currentValue: string | number;
 };

package/dist/animation/hooks/useValues.d.ts

@@ -1,8 +1,7 @@
 import { FluidValue } from '@raidipesh78/re-motion';
-import { type UpdateValue } from '../core/FluidController';
-import { type UseValueConfig } from './useValue';
-export declare function useValues<T extends number[] | string[]>(initialValue: T, config?: UseValueConfig): {
+import type { ToValue } from '../types';
+export declare function useValues(initialValue: number[] | string[]): {
     get value(): FluidValue[];
-    set value(to: Array<number | number[] | string | UpdateValue | UpdateValue[]>);
+    set value(to: number[] | string[] | ToValue[]);
     readonly currentValue: (string | number)[];
 };

package/dist/animation/index.d.ts

@@ -1,5 +1,5 @@
 export { interpolate, bInterpolate } from './interpolation';
-export { MountedBlock, ScrollableBlock, TransitionBlock } from './modules';
-export { useValue, useValues, useMount, type UseValueConfig, type UseMountConfig, } from './hooks';
-export { withSpring, withTiming, withSequence, withDelay, withEase, withConfig, withDecay, withLoop, } from './controllers';
-export { delay, AnimationConfig } from './helpers';
+export { MountedBlock, ScrollableBlock } from './modules';
+export { useValue, useMount, useValues, type UseMountConfig } from './hooks';
+export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './controllers';
+export { AnimationConfig } from './helpers';

package/dist/animation/modules/MountedBlock.d.ts

@@ -1,20 +1,11 @@
-import * as React from 'react';
-import { type UseMountConfig } from '../hooks';
+import { ReactNode } from 'react';
 import { FluidValue } from '@raidipesh78/re-motion';
+import { type UseMountConfig } from '../hooks';
 interface MountedBlockProps extends Partial<UseMountConfig> {
     state: boolean;
     children: (animation: {
         value: FluidValue;
-    }) => React.ReactNode;
+    }) => ReactNode;
 }
-/**
- * MountedBlock - Higher order component which handles mounting and unmounting of a component.
- * @param { boolean } state - Boolean indicating the component should mount or unmount.
- * @param { function } children - Child as a function with `AnimatedValue` on `.value` property.
- * @param { number } } from - Number that dictates the beginning state for animation.
- * @param { number } enter - Number that dictates the entry state for animation.
- * @param { number } exit - Number that dictates the exit state for animation.
- * @param { UseValueConfig } config - Animation configuration for overall animation.
- */
-export declare const MountedBlock: ({ state, children, from, enter, exit, config, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MountedBlock: ({ state, children, from, enter, exit, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/animation/modules/ScrollableBlock.d.ts

@@ -1,22 +1,11 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { FluidValue } from '@raidipesh78/re-motion';
-import { type UseValueConfig } from '../hooks';
 interface ScrollableBlockProps {
     children?: (animation: {
         value: FluidValue;
-    }) => React.ReactNode;
+    }) => ReactNode;
     direction?: 'single' | 'both';
     threshold?: number;
-    animationConfig?: UseValueConfig;
 }
-/**
- * ScrollableBlock - Higher order component to handle the entrance or exit animation
- * of a component when it enters or exit the viewport. Accepts child as a function with
- * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
- * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
- * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
- * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
- * @prop { UseValueConfig } animationConfig - Animation config
- */
 export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/animation/modules/index.d.ts

@@ -1,3 +1,2 @@
 export * from './MountedBlock';
 export * from './ScrollableBlock';
-export * from './TransitionBlock';

package/dist/animation/types.d.ts

@@ -0,0 +1,16 @@
+import { FluidValue, spring } from '@raidipesh78/re-motion';
+export type EndCallbackResult = {
+    finished: boolean;
+    value?: number | string;
+};
+export type EndCallback = (result: EndCallbackResult) => void;
+export type Controller = ReturnType<typeof spring>;
+export type ToValue = (animation: FluidValue) => {
+    controller: Controller;
+    callback?: EndCallback;
+};
+export interface WithCallbacks {
+    onStart?: (value: number | string) => void;
+    onChange?: (value: number | string) => void;
+    onRest?: (value: number | string) => void;
+}

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export { Easing, makeFluid as makeAnimated, fluid as animate, } from '@raidipesh78/re-motion';
-export { AnimationConfig, MountedBlock, ScrollableBlock, TransitionBlock, } from './animation';
+export { AnimationConfig, MountedBlock, ScrollableBlock } from './animation';
 export { interpolate, bInterpolate } from './animation';
 export { useValue, useMount, useValues } from './animation';
-export { withSpring, withTiming, withSequence, withDelay, withEase, withConfig, withDecay, withLoop, delay, } from './animation';
+export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './animation';
 export { useMeasure, useOutsideClick, useWindowDimension } from './hooks';
 export { useDrag, useGesture, useMouseMove, useScroll, useWheel, } from './gestures/hooks';
 export { bin, clamp, mix, rubberClamp, move, snapTo } from './gestures/helpers';
-export type { UseValueConfig, UseMountConfig } from './animation';
+export type { UseMountConfig } from './animation';