added useStateAsMotion hook

README.md

@@ -84,3 +84,24 @@ const MyComponent = () => {
 
 - `state`: React state
 - `value`: Motion value
+
+### `useStateAsMotion`
+
+Returns a MotionValue value that updates when the React state changes
+
+```jsx
+const MyComponent = () => {
+  const [opacity, setOpacity] = useState(0)
+
+  const motionOpacity = useStateAsMotion(opacity)
+
+  return <motion.div style={{ opacity: motionOpacity }} />
+}
+```
+
+#### API
+
+`const value = useStateAsMotion(state)`
+
+- `value`: Motion value
+- `state`: React state

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useInViewAnimate } from "./useInViewAnimate"
 export { useInViewScroll } from "./useInViewScroll"
 export { useMotionAsState } from "./useMotionAsState"
+export { useStateAsMotion } from "./useStateAsMotion"

src/hooks/useStateAsMotion.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from "react"
+import { useMotionValue } from "framer-motion"
+
+/**
+ * `useStateAsMotion` returns a MotionValue that updates when the React state changes
+ *
+ * @param state - React state
+ */
+export const useStateAsMotion = (state: any) => {
+  const motionValue = useMotionValue(state)
+
+  useEffect(() => {
+    motionValue.set(state)
+  }, [state])
+
+  return motionValue
+}

src/index.ts

@@ -1 +1,6 @@
-export { useInViewAnimate, useInViewScroll, useMotionAsState } from "./hooks"
+export {
+  useInViewAnimate,
+  useInViewScroll,
+  useMotionAsState,
+  useStateAsMotion
+} from "./hooks"