framer-motion - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [0.3.2] 2019-02-08
+
+### Changed
+
+-   Added TSDocs for `useCycle`
+
 ## [0.3.0] 2019-02-05
@@ -7,0 +13,0 @@

dist/behaviours/use-draggable.d.ts

@@ -13,6 +13,30 @@ import { RefObject } from "react";
 export interface DraggableProps {
+    /**
+     * Enable dragging for this element
+     *
+     * Set "x" or "y" to only drag in a specific direction
+     * Set "lockDirection" to lock dragging into the initial direction
+     *  @default false
+     */
     dragEnabled?: boolean | DragDirection | "lockDirection";
+    /**
+     * Disable global drag locking
+     * When using nested dragging, setting this to true will enable parents to also drag
+     * @default false
+     */
     dragPropagation?: boolean;
+    /**
+     * Apply constraints to dragging
+     * @default false
+     */
     dragConstraints?: Constraints;
+    /**
+     * Allow "dragElasticging" beyond the drag constraints
+     * @default false
+     */
     dragElastic?: Overdrag;
+    /**
+     * Allow smooth scrolling
+     * @default false
+     */
     dragMomentum?: boolean;
@@ -19,0 +43,0 @@ onDragStart?: (e: MouseEvent | TouchEvent) => void;

dist/events/event-info.d.ts

 import { EventHandler } from "./types";
-export declare const _TEST_POINTER_DO_NOT_USE: {
-    x: number;
-    y: number;
-};
 export declare const wrapHandler: (handler?: EventHandler | undefined) => EventListener | undefined;

dist/events/types.d.ts

@@ -7,2 +7,3 @@ import { RefObject } from "react";
 export declare namespace Point {
+    /** @alpha */
     const subtract: (a: Point, b: Point) => Point;
@@ -12,3 +13,2 @@ }
     point: Point;
-    devicePoint: Point;
 }
@@ -15,0 +15,0 @@ export declare type EventHandler = (event: Event, info: EventInfo) => void;

dist/events/use-pointer-events.d.ts

@@ -31,3 +31,11 @@ import { EventHandler, TargetOrRef, TargetBasedReturnType } from "./types";
 export declare const usePointerEvents: <Target extends TargetOrRef>(eventHandlers: Partial<PointerEventHandlers>, ref: Target, options?: AddEventListenerOptions | undefined) => TargetBasedReturnType<Target>;
+/**
+ * A Conditional version of usePointerEvents
+ * As opposed to usePointerEvents, this function does not require to pass a target or ref.
+ * When calling this without a target, the handlers passed to the function are returned
+ * @param eventHandlers
+ * @param ref
+ * @param options
+ */
 export declare const useConditionalPointerEvents: <Target extends TargetOrRef, Handlers extends Partial<PointerEventHandlers>>(eventHandlers: Handlers, ref?: Target | undefined, options?: AddEventListenerOptions | undefined) => Handlers | undefined;
 export {};

dist/gestures/use-pan-gesture.d.ts

@@ -5,3 +5,2 @@ import { RefObject } from "react";
     point: Point;
-    devicePoint: Point;
     delta: Point;
@@ -8,0 +7,0 @@ offset: Point;

dist/gestures/use-tap-gesture.d.ts

@@ -7,3 +7,2 @@ import { RefObject } from "react";
     point: Point;
-    devicePoint: Point;
 }
@@ -10,0 +9,0 @@ declare type TapHandler = (session: TapInfo, event: Event) => void;

dist/index.d.ts

@@ -9,1 +9,2 @@ export { motion } from "./motion";
 export { useCycle } from "./utils/use-cycle";
+export { MotionPlugins, MotionPluginContext, } from "./motion/utils/MotionPluginContext";

dist/motion/utils/pose-resolvers.d.ts

 import { MotionValue } from "../../value";
 export declare const resolvePoses: (pose?: string | string[] | MotionValue<any> | undefined) => string[];
+/**
+ * Hooks in React sometimes accept a dependency array as their final argument. (ie useEffect/useMemo)
+ * When values in this array change, React re-runs the dependency. However if the array
+ * contains a variable number of items, React throws an error.
+ */
 export declare const asDependencyList: (list: string[]) => string[];

dist/utils/use-cycle.d.ts

@@ -0,1 +1,38 @@
+/**
+ * Cycles through a series of states.
+ *
+ * @remarks
+ * `useCycle` works similar to React's `useState`.
+ *
+ * It's provided an array of possible states, and returns an array of two arguments.
+ *
+ * The first item is the current state.
+ * The second item is a function that cycles to the next state.
+ *
+ * ```jsx
+ * const [x, cycleX] = useCycle([0, 100, 200])
+ *
+ * return <Frame animate={{ x }} onClick={cycleX} />
+ * ```
+ *
+ * By default, the initial state is the first item in the provided array (`0` in the above example).
+ *
+ * `useCycle` accepts a second parameter, that can set a different index. For example:
+ *
+ * ```jsx
+ * const [x, cycleX] = useCycle([0, 100, 200], 2)
+ * ```
+ *
+ * `x` would initially be `200`.
+ *
+ * The returned `cycleState` function, by default, cycles to the next item in the array.
+ *
+ * Optionally, it accepts an index that will cycle to a specific item in the array.
+ *
+ * @param items - An array of the possible states
+ * @param initialIndex - Index of initial state. Optional, defaults to 0
+ * @returns [currentState, cycleState]
+ *
+ * @public
+ */
 export declare const useCycle: <T>(items: T[], initialIndex?: number) => [T, (i?: any) => void];

dist/value/use-motion-value.d.ts

 import { MotionValue } from ".";
+/**
+ * For advanced use-cases, you can assume external control of the motion values used by `motion` components.
+ *
+ * This is usually used in conjunction with `useTransform`.
+ *
+ * ## Import
+ *
+ * ```javascript
+ * import { useMotionValue } from 'framer-motion'
+ * ```
+ *
+ * ## Usage
+ *
+ * Motion values are created with the `useMotionValue` hook, providing it an initial value:
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ * ```
+ *
+ * This can be passed to a motion component via the `motionValue` prop:
+ *
+ * ```javascript
+ * const MotionComponent = motion.div()
+ *
+ * export const () => {
+ *   const x = useMotionValue(0)
+ *
+ *   return <MotionComponent motionValues={{ x }} />
+ * }
+ * ```
+ *
+ * @param {number | string} init - The initial state of the `MotionValue`
+ */
 export declare const useMotionValue: <T>(init: T) => MotionValue<T>;

dist/value/use-viewport-scroll-values.d.ts

@@ -0,1 +1,8 @@
+/**
+ * `useViewportScroll` provides `MotionValue`s that update when the viewport scrolls.
+ *
+ * This makes it possible to transform viewport scroll into other values.
+ *
+ * For instance, highlighting different table of contents items to correspond with page scroll.
+ */
 export declare const useViewportScrollValues: () => {
@@ -2,0 +9,0 @@ scrollX: import(".").MotionValue<number>;

package.json

 {
     "name": "framer-motion",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "main": "dist/framer-motion.cjs.js",
@@ -37,5 +37,5 @@ "module": "dist/framer-motion.es.js",
         "progress-bar-webpack-plugin": "^1.11.0",
-        "react": "^16.7.0-alpha.2",
+        "react": "16.8",
         "react-dev-utils": "^6.1.1",
-        "react-dom": "^16.7.0-alpha.2",
+        "react-dom": "16.8",
         "react-testing-library": "^5.3.0",
@@ -42,0 +42,0 @@ "rollup": "^0.67.3",

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

661685

increased by37.49%

Number of package files

115

increased by112.96%

Lines of code

15458

increased by50.77%

No dependency changes