react-uicomp - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/index.d.ts

 export * from "./core";
 export * from "./ui";
+export * from "./animated";

dist/index.js

@@ -692,3 +692,84 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var useValue = function useValue(initialValue) {
+  var ref = React.useRef();
+
+  if (ref.current === undefined) {
+    ref.current = initialValue;
+  }
+
+  return ref.current;
+};
+var useAnimatedValue = function useAnimatedValue(initialValue, config) {
+  var _initialValue = useValue(initialValue);
+
+  var _ref = config !== undefined && config,
+      onAnimationEnd = _ref.onAnimationEnd,
+      restConfig = _objectWithoutPropertiesLoose(_ref, ["onAnimationEnd"]);
+
+  var _useSpring = reactSpring.useSpring(function () {
+    return {
+      value: _initialValue,
+      onRest: function onRest(_ref2) {
+        var value = _ref2.value;
+
+        if (value !== initialValue) {
+          onAnimationEnd && onAnimationEnd();
+        }
+      },
+      config: _extends({}, reactSpring.config["default"], restConfig)
+    };
+  }),
+      props = _useSpring[0],
+      set = _useSpring[1];
+
+  var _update = function _update(updatedValue) {
+    set({
+      value: updatedValue
+    });
+  };
+
+  var _targetObject = {
+    value: _initialValue
+  };
+  return new Proxy(_targetObject, {
+    set: function set(target, key, value) {
+      if (key === "value") {
+        target.value = value;
+
+        _update(value);
+
+        return true;
+      }
+
+      return false;
+    },
+    get: function get(_target, key) {
+      if (key === "value") {
+        return props.value;
+      }
+
+      return false;
+    }
+  });
+};
+var interpolate = function interpolate(animatedValue, config) {
+  var inputRange = config.inputRange,
+      outputRange = config.outputRange,
+      rest = _objectWithoutPropertiesLoose(config, ["inputRange", "outputRange"]);
+
+  return animatedValue.interpolate(_extends({
+    range: inputRange,
+    output: outputRange
+  }, rest));
+};
+
+var AnimatedBlock = function AnimatedBlock(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  return React__default.createElement(reactSpring.animated.div, Object.assign({}, rest), children);
+};
+
 exports.ActiveLink = ActiveLink;
+exports.AnimatedBlock = AnimatedBlock;
 exports.Auth = Auth;
@@ -703,2 +784,4 @@ exports.Dropdown = Dropdown;
 exports.ThemeConfig = DefaultThemeConfig;
+exports.interpolate = interpolate;
+exports.useAnimatedValue = useAnimatedValue;
 exports.useAuth = useAuth;
@@ -708,2 +791,3 @@ exports.useNavigation = useNavigation;
 exports.useTheme = useTheme;
+exports.useValue = useValue;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React, { useContext, useMemo, useRef } from 'react';
 import { Route, Redirect, HashRouter, BrowserRouter, Switch, NavLink, useHistory, useLocation, useParams } from 'react-router-dom';
-import { useTransition, animated, interpolate } from 'react-spring';
+import { useTransition, animated, interpolate as interpolate$1, useSpring, config } from 'react-spring';
 import styled from 'styled-components';
@@ -675,3 +675,3 @@
       style: _extends({}, style, {
-        transform: interpolate([props.opacity.interpolate({
+        transform: interpolate$1([props.opacity.interpolate({
           range: [0, 1],
@@ -690,3 +690,83 @@ output: [0.9, 1]
 
-export { ActiveLink, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, Theme, DefaultThemeConfig as ThemeConfig, useAuth, useNavigation, useOutsideClick, useTheme };
+var useValue = function useValue(initialValue) {
+  var ref = useRef();
+
+  if (ref.current === undefined) {
+    ref.current = initialValue;
+  }
+
+  return ref.current;
+};
+var useAnimatedValue = function useAnimatedValue(initialValue, config$1) {
+  var _initialValue = useValue(initialValue);
+
+  var _ref = config$1 !== undefined && config$1,
+      onAnimationEnd = _ref.onAnimationEnd,
+      restConfig = _objectWithoutPropertiesLoose(_ref, ["onAnimationEnd"]);
+
+  var _useSpring = useSpring(function () {
+    return {
+      value: _initialValue,
+      onRest: function onRest(_ref2) {
+        var value = _ref2.value;
+
+        if (value !== initialValue) {
+          onAnimationEnd && onAnimationEnd();
+        }
+      },
+      config: _extends({}, config["default"], restConfig)
+    };
+  }),
+      props = _useSpring[0],
+      set = _useSpring[1];
+
+  var _update = function _update(updatedValue) {
+    set({
+      value: updatedValue
+    });
+  };
+
+  var _targetObject = {
+    value: _initialValue
+  };
+  return new Proxy(_targetObject, {
+    set: function set(target, key, value) {
+      if (key === "value") {
+        target.value = value;
+
+        _update(value);
+
+        return true;
+      }
+
+      return false;
+    },
+    get: function get(_target, key) {
+      if (key === "value") {
+        return props.value;
+      }
+
+      return false;
+    }
+  });
+};
+var interpolate = function interpolate(animatedValue, config) {
+  var inputRange = config.inputRange,
+      outputRange = config.outputRange,
+      rest = _objectWithoutPropertiesLoose(config, ["inputRange", "outputRange"]);
+
+  return animatedValue.interpolate(_extends({
+    range: inputRange,
+    output: outputRange
+  }, rest));
+};
+
+var AnimatedBlock = function AnimatedBlock(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  return React.createElement(animated.div, Object.assign({}, rest), children);
+};
+
+export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, Theme, DefaultThemeConfig as ThemeConfig, interpolate, useAnimatedValue, useAuth, useNavigation, useOutsideClick, useTheme, useValue };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-uicomp",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React UI component for creating complex routes and beautiful UI",
@@ -5,0 +5,0 @@ "author": "dipeshrai123",

README.md

@@ -337,4 +337,41 @@ # react-uicomp
 
+#### useAnimatedValue()
+
+**useAnimatedValue()** is very flexible and powerful hook that lets you define animated values which is abstract implementation of useSpring() method. Its value is reserved until the component unmounts so, it will be very useful for creating smooth animations without any re-rendering issues. It takes any number as first argument and returns an object with just **value** property which will be more than enough to create any animation.
+
+#### AnimatedBlock
+
+AnimatedBlock is special type of element which inherits all properties of **<div>** element and can accept animated values provided by **useAnimatedValue()**.
+
+**Example**
+
+```tsx
+import { AnimatedBlock, useAnimatedValue } from "react-uicomp";
+
+export default function() {
+  const opacity = useAnimatedValue(0); // It initializes opacity object with value 0.
+
+  return (
+      <div>
+          {/* AnimatedBlock component should be used with useAnimatedValue() */}
+          <AnimatedBlock 
+            style={{
+              opacity: opacity.value, // value property should be passed
+              width: 100,
+              padding: 20,
+              background: "#39F",
+            }}
+          >
+            ANIMATED
+          </AnimatedBlock>
+          
+          {/* Animating from 0 to 1 is very simple just assign opacity.value = 1 */}
+          <button onClick={() => opacity.value = 1}>Animate Me</button>
+      </div>
+  );
+}
+```
+
 ## License
 
 MIT © [dipeshrai123](https://github.com/dipeshrai123)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

159484

increased by10.22%

Lines of code

1601

increased by9.58%

Number of lines in readme file

377

increased by10.88%

Worsened metrics

Number of package files

21

decreased by-4.55%

No dependency changes