Adding initial option to useInView (#3050)

* Adding initial option to useInView

* Change initial value

packages/framer-motion/src/motion/features/viewport/types.ts

@@ -1,5 +1,5 @@
-import { RefObject } from "../../../utils/safe-react-types"
 import { TargetAndTransition } from "../../../types"
+import { RefObject } from "../../../utils/safe-react-types"
 import { VariantLabels } from "../../types"
 
 export type ViewportEventHandler = (

packages/framer-motion/src/utils/__tests__/use-in-view.test.tsx

@@ -1,5 +1,5 @@
+import { act, useEffect, useRef } from "react"
 import { render } from "../../../jest.setup"
-import { act, useRef, useEffect } from "react"
 import { useInView } from "../use-in-view"
 import { getActiveObserver } from "./mock-intersection-observer"
 
@@ -34,6 +34,30 @@ describe("useInView", () => {
         expect(results).toEqual([false])
     })
 
+    test("Can change initial value", () => {
+        const results: boolean[] = []
+
+        const Component = () => {
+            const ref = useRef(null)
+            const isInView = useInView(ref, { initial: true })
+
+            useEffect(() => {
+                if (results[results.length - 1] !== isInView)
+                    results.push(isInView)
+            }, [isInView])
+
+            return <div ref={ref} />
+        }
+
+        const { rerender } = render(<Component />)
+        rerender(<Component />)
+        rerender(<Component />)
+        rerender(<Component />)
+        rerender(<Component />)
+
+        expect(results).toEqual([true])
+    })
+
     test("Returns true when element enters the viewport", async () => {
         const results: boolean[] = []
 

packages/framer-motion/src/utils/use-in-view.ts

@@ -6,13 +6,20 @@ export interface UseInViewOptions
     root?: RefObject<Element | null>
     once?: boolean
     amount?: "some" | "all" | number
+    initial?: boolean
 }
 
 export function useInView(
     ref: RefObject<Element | null>,
-    { root, margin, amount, once = false }: UseInViewOptions = {}
+    {
+        root,
+        margin,
+        amount,
+        once = false,
+        initial = false,
+    }: UseInViewOptions = {}
 ) {
-    const [isInView, setInView] = useState(false)
+    const [isInView, setInView] = useState(initial)
 
     useEffect(() => {
         if (!ref.current || (once && isInView)) return