react-ui-animate 3.3.2 → 4.0.0-alpha.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Dipesh Rai
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Dipesh Rai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,209 +1,209 @@
-# React UI Animate
-
-[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
-
-> Create smooth animations and interactive gestures in React applications effortlessly.
-
-### Install
-
-You can install react-ui-animate via npm or yarn:
-
-```sh
-npm i react-ui-animate
-```
-
-```sh
-yarn add react-ui-animate
-```
-
-### Getting Started
-
-The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Here’s how you can get started quickly:
-
-```javascript
-import { AnimatedBlock, useAnimatedValue } from 'react-ui-animate';
-
-export default function () {
-  // Initialize an animated opacity value
-  const opacity = useAnimatedValue(0);
-
-  return (
-    <div>
-      {/* AnimatedBlock component uses the animated opacity value */}
-      <AnimatedBlock
-        style={{
-          opacity: opacity.value, // using opacity with value property
-          width: 100,
-          padding: 20,
-          background: '#39F',
-        }}
-      >
-        ANIMATED
-      </AnimatedBlock>
-
-      {/* Clicking the button changes the opacity smoothly to 1 */}
-      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
-    </div>
-  );
-}
-```
-
-In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
-
-### Key Features
-
-#### `useAnimatedValue()`
-
-The `useAnimatedValue()` 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 = useAnimatedValue(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
-```
-
-#### `AnimatedBlock`
-
-`AnimatedBlock` is a special component designed to work with `useAnimatedValue()`. It simplifies animating elements by directly using animated values.
-
-```javascript
-const width = useAnimatedValue(100); // Start with a width of 100
-
-<AnimatedBlock
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: '#39f',
-  }}
-/>;
-```
-
-#### `interpolate`
-
-The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
-
-```javascript
-import { useAnimatedValue, AnimatedBlock, interpolate } from 'react-ui-animate';
-
-const width = useAnimatedValue(100); // Start with a width of 100
-
-<AnimatedBlock
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: interpolate(width.value, [100, 200], ['red', 'blue']),
-  }}
-/>;
-```
-
-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
-
-You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
-
-To apply a spring animation and update the value to `10`:
-
-```jsx
-x.value = withSpring(10);
-```
-
-To apply a timing animation with a duration of 5000 milliseconds:
-
-```jsx
-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]);
-```
-
-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.
-
-#### `useMountedValue()`
-
-The `useMountedValue()` hook facilitates managing the mounting and unmounting of a component with animations.
-
-```jsx
-import { useMountedValue } from 'react-ui-animate';
-
-export default function App() {
-  const [visible, setVisible] = useState(false);
-
-  const open = useMountedValue(visible, {
-    from: 0,
-    enter: 1,
-    exit: 0,
-  });
-
-  return open((animation, mounted) => mounted && <AnimatedBlock />);
-}
-```
-
-In this example,
-
-1. A state variable `visible` determines whether the component is visible.
-2. The `useMountedValue` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
-3. The `open` function, returned by `useMountedValue`, is used to conditionally render `AnimatedBlock` 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:
-
-1. `useDrag`: Handles drag gestures on elements.
-2. `useMouseMove`: Handles mouse movements.
-3. `useScroll`: Handles scrolling of the document.
-4. `useWheel`: Handles wheel rotation gestures.
-5. `useGesture`: Handles combinations of various gestures.
-
-**Example**: `useDrag`
-
-Here’s an example of using the useDrag hook to enable drag gestures:
-
-```jsx
-import { useAnimatedValue, AnimatedBlock, useDrag } from 'react-ui-animate';
-
-export const Draggable = () => {
-  const translateX = useAnimatedValue(0);
-
-  const bind = useDrag(function ({ down, movementX }) {
-    translateX.value = down ? movementX : 0;
-  });
-
-  return (
-    <AnimatedBlock
-      {...bind()}
-      style={{
-        width: 100,
-        height: 100,
-        backgroundColor: '#3399ff',
-        translateX: translateX.value, // Use translateX with animated value
-      }}
-    />
-  );
-};
-```
-
-In this example, the blue block can be dragged horizontally by clicking and dragging.
-
-## Documentation
-
-For detailed documentation and examples, visit the official [react-ui-animate documentation](http://react-ui-animate.js.org/).
-
-## License
-
-This library is licensed under the MIT License.
+# React UI Animate
+
+[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
+
+> Create smooth animations and interactive gestures in React applications effortlessly.
+
+### Install
+
+You can install react-ui-animate via npm or yarn:
+
+```sh
+npm i react-ui-animate
+```
+
+```sh
+yarn add react-ui-animate
+```
+
+### Getting Started
+
+The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Here’s how you can get started quickly:
+
+```javascript
+import { animate.div, useAnimatedValue } from 'react-ui-animate';
+
+export default function () {
+  // Initialize an animated opacity value
+  const opacity = useAnimatedValue(0);
+
+  return (
+    <div>
+      {/* animate.div component uses the animated opacity value */}
+      <animate.div
+        style={{
+          opacity: opacity.value, // using opacity with value property
+          width: 100,
+          padding: 20,
+          background: '#39F',
+        }}
+      >
+        ANIMATED
+      </animate.div>
+
+      {/* Clicking the button changes the opacity smoothly to 1 */}
+      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
+    </div>
+  );
+}
+```
+
+In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
+
+### Key Features
+
+#### `useAnimatedValue()`
+
+The `useAnimatedValue()` 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 = useAnimatedValue(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
+```
+
+#### `animate.div`
+
+`animate.div` is a special component designed to work with `useAnimatedValue()`. It simplifies animating elements by directly using animated values.
+
+```javascript
+const width = useAnimatedValue(100); // Start with a width of 100
+
+<animate.div
+  style={{
+    width: width.value,
+    height: 100,
+    backgroundColor: '#39f',
+  }}
+/>;
+```
+
+#### `interpolate`
+
+The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
+
+```javascript
+import { useAnimatedValue, animate.div, interpolate } from 'react-ui-animate';
+
+const width = useAnimatedValue(100); // Start with a width of 100
+
+<animate.div
+  style={{
+    width: width.value,
+    height: 100,
+    backgroundColor: interpolate(width.value, [100, 200], ['red', 'blue']),
+  }}
+/>;
+```
+
+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
+
+You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
+
+To apply a spring animation and update the value to `10`:
+
+```jsx
+x.value = withSpring(10);
+```
+
+To apply a timing animation with a duration of 5000 milliseconds:
+
+```jsx
+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]);
+```
+
+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.
+
+#### `useMountedValue()`
+
+The `useMountedValue()` hook facilitates managing the mounting and unmounting of a component with animations.
+
+```jsx
+import { useMountedValue } from 'react-ui-animate';
+
+export default function App() {
+  const [visible, setVisible] = useState(false);
+
+  const open = useMountedValue(visible, {
+    from: 0,
+    enter: 1,
+    exit: 0,
+  });
+
+  return open((animation, mounted) => mounted && <animate.div />);
+}
+```
+
+In this example,
+
+1. A state variable `visible` determines whether the component is visible.
+2. The `useMountedValue` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
+3. The `open` function, returned by `useMountedValue`, 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:
+
+1. `useDrag`: Handles drag gestures on elements.
+2. `useMouseMove`: Handles mouse movements.
+3. `useScroll`: Handles scrolling of the document.
+4. `useWheel`: Handles wheel rotation gestures.
+5. `useGesture`: Handles combinations of various gestures.
+
+**Example**: `useDrag`
+
+Here’s an example of using the useDrag hook to enable drag gestures:
+
+```jsx
+import { useAnimatedValue, animate.div, useDrag } from 'react-ui-animate';
+
+export const Draggable = () => {
+  const translateX = useAnimatedValue(0);
+
+  const bind = useDrag(function ({ down, movementX }) {
+    translateX.value = down ? movementX : 0;
+  });
+
+  return (
+    <animate.div
+      {...bind()}
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: '#3399ff',
+        translateX: translateX.value, // Use translateX with animated value
+      }}
+    />
+  );
+};
+```
+
+In this example, the blue block can be dragged horizontally by clicking and dragging.
+
+## Documentation
+
+For detailed documentation and examples, visit the official [react-ui-animate documentation](http://react-ui-animate.js.org/).
+
+## License
+
+This library is licensed under the MIT License.

package/dist/animation/animationType.d.ts

@@ -1,16 +1,16 @@
-import { FluidValueConfig } from '@raidipesh78/re-motion';
+import { UseFluidValueConfig } from '@raidipesh78/re-motion';
 export declare const AnimationConfigUtils: {
-    ELASTIC: FluidValueConfig;
-    BOUNCE: FluidValueConfig;
-    EASE: FluidValueConfig;
-    STIFF: FluidValueConfig;
-    WOOBLE: FluidValueConfig;
-    EASE_IN: FluidValueConfig;
-    EASE_OUT: FluidValueConfig;
-    EASE_IN_OUT: FluidValueConfig;
-    POWER1: FluidValueConfig;
-    POWER2: FluidValueConfig;
-    POWER3: FluidValueConfig;
-    POWER4: FluidValueConfig;
-    LINEAR: FluidValueConfig;
+    ELASTIC: UseFluidValueConfig;
+    BOUNCE: UseFluidValueConfig;
+    EASE: UseFluidValueConfig;
+    STIFF: UseFluidValueConfig;
+    WOOBLE: UseFluidValueConfig;
+    EASE_IN: UseFluidValueConfig;
+    EASE_OUT: UseFluidValueConfig;
+    EASE_IN_OUT: UseFluidValueConfig;
+    POWER1: UseFluidValueConfig;
+    POWER2: UseFluidValueConfig;
+    POWER3: UseFluidValueConfig;
+    POWER4: UseFluidValueConfig;
+    LINEAR: UseFluidValueConfig;
 };

package/dist/animation/index.d.ts

@@ -1,5 +1,5 @@
 export { interpolate, bInterpolate } from './interpolation';
-export { AnimatedBlock, AnimatedImage, AnimatedInline, MountedBlock, ScrollableBlock, TransitionBlock, } from './modules';
+export { MountedBlock, ScrollableBlock, TransitionBlock } from './modules';
 export { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
 export { useMountedValue, UseMountedValueConfig } from './useMountedValue';
 export { AnimationConfigUtils } from './animationType';

package/dist/animation/interpolation.d.ts

@@ -1,5 +1,4 @@
-import { ExtrapolateConfig, FluidValue } from '@raidipesh78/re-motion';
-import { ValueType } from './useAnimatedValue';
+import { ExtrapolateConfig } from '@raidipesh78/re-motion';
 /**
  * Maps the input range to the given output range using the specified extrapolation configuration.
  * The function ensures that the value is either a number or a FluidValue.
@@ -11,7 +10,7 @@ import { ValueType } from './useAnimatedValue';
  * @returns - The interpolated value, which will be a number or FluidValue.
  * @throws - Will throw an error if the value is not a number or FluidValue.
  */
-export declare function interpolate(value: FluidValue | ValueType | number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
+export declare function interpolate(value: any, inputRange: number[], outputRange: number[] | string[], extrapolateConfig?: ExtrapolateConfig): import("@raidipesh78/re-motion/dist/fluids/FluidInterpolation").FluidInterpolation;
 /**
  * A shorthand function for interpolate that maps the input range [0, 1] to the given [minOutput, maxOutput].
  * The function ensures that the value is either a number or a FluidValue.
@@ -23,4 +22,4 @@ export declare function interpolate(value: FluidValue | ValueType | number, inpu
  * @returns - The interpolated value, which will be a number or FluidValue.
  * @throws - Will throw an error if the value is not a number or FluidValue.
  */
-export declare function bInterpolate(value: FluidValue | ValueType | number, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
+export declare function bInterpolate(value: any, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): import("@raidipesh78/re-motion/dist/fluids/FluidInterpolation").FluidInterpolation;

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

@@ -1,21 +1,15 @@
 import * as React from 'react';
-import type { FluidValueConfig, Length } from '@raidipesh78/re-motion';
-import { ValueType } from '../useAnimatedValue';
-interface MountedValueConfig extends FluidValueConfig {
-}
-type AssignValue = {
-    toValue?: Length;
-    config?: MountedValueConfig;
-};
+import { UseFluidValueConfig } from '@raidipesh78/re-motion';
+import type { UpdateValue } from '../useAnimatedValue';
 interface MountedBlockProps {
     state: boolean;
     children: (animation: {
-        value: ValueType;
+        value: any;
     }) => React.ReactNode;
     from?: number;
-    enter?: number | AssignValue | ((update: (next: AssignValue) => Promise<any>) => void);
-    exit?: number | AssignValue | ((update: (next: AssignValue) => Promise<any>) => void);
-    config?: MountedValueConfig;
+    enter?: number | UpdateValue;
+    exit?: number | UpdateValue;
+    config?: UseFluidValueConfig;
 }
 /**
  * MountedBlock - Higher order component which handles mounting and unmounting of a component.
@@ -24,7 +18,7 @@ interface MountedBlockProps {
  * @param { number } } from - Number that dictates the beginning state for animation.
  * @param { number | { toValue: number, config: MountedValueConfig } } enter - Number that dictates the entry state for animation.
  * @param { number | { toValue: number, config: MountedValueConfig } } exit - Number that dictates the exit state for animation.
- * @param { MountedValueConfig } config - Animation configuration for overall animation.
+ * @param { UseFluidValueConfig } config - Animation configuration for overall animation.
  */
 export declare const MountedBlock: ({ state, children, from, enter, exit, config, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
+import { UseAnimatedValueConfig } from '../useAnimatedValue';
 interface ScrollableBlockProps {
     children?: (animation: {
-        value: ValueType;
+        value: any;
     }) => React.ReactNode;
     direction?: 'single' | 'both';
     threshold?: number;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
+import { UseAnimatedValueConfig } from '../useAnimatedValue';
 interface TransitionBlockProps {
     state: boolean;
     children: (animation: {
-        value: ValueType;
+        value: any;
     }) => React.ReactNode;
     config?: UseAnimatedValueConfig;
 }

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

@@ -1,6 +1,3 @@
-export * from './AnimatedBlock';
-export * from './AnimatedInline';
-export * from './AnimatedImage';
 export * from './MountedBlock';
 export * from './ScrollableBlock';
 export * from './TransitionBlock';

package/dist/animation/useAnimatedValue.d.ts

@@ -1,12 +1,11 @@
-import { FluidValueConfig } from '@raidipesh78/re-motion';
-type Length = number | string;
-export interface UseAnimatedValueConfig extends FluidValueConfig {
+import { UseFluidValueConfig } from '@raidipesh78/re-motion';
+export interface UseAnimatedValueConfig extends UseFluidValueConfig {
 }
 type AssignValue = {
-    toValue?: Length;
+    toValue?: number;
     config?: UseAnimatedValueConfig;
 };
-export type ValueType = Length | AssignValue | ((update: (next: AssignValue) => Promise<any>) => void);
+export type UpdateValue = AssignValue | ((update: (next: AssignValue) => Promise<any>) => void);
 /**
  * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
  * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
@@ -15,8 +14,8 @@ export type ValueType = Length | AssignValue | ((update: (next: AssignValue) =>
  * @param { string | number } initialValue - Initial value
  * @param { UseAnimatedValueConfig } config - Animation configuration object.
  */
-export declare function useAnimatedValue(initialValue: Length, config?: UseAnimatedValueConfig): {
-    value: ValueType;
-    currentValue: number | string;
+export declare function useAnimatedValue(initialValue: number, config?: UseAnimatedValueConfig): {
+    value: any;
+    currentValue: number;
 };
 export {};