feat: improve context logic

Author: Emiliano-Bucci

example/.eslintcache

@@ -1 +1 @@
-[{"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx":"1","/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx":"2"},{"size":164,"mtime":1607363608000,"results":"3","hashOfConfig":"4"},{"size":2291,"mtime":1616847947465,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bpxiyg",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx",[],"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx",[]]
+[{"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx":"1","/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx":"2"},{"size":164,"mtime":1607363608000,"results":"3","hashOfConfig":"4"},{"size":2091,"mtime":1616848806743,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"bpxiyg",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/index.tsx",[],["11","12"],"/Users/emiliano/Desktop/projects/react-spring-carousel/example/src/App.tsx",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]

example/src/App.tsx

@@ -51,7 +51,7 @@ const Item: React.FC<HTMLAttributes<HTMLDivElement>> = ({
   )
 }
 
-function MyApp() {
+const App = () => {
   const [, setActiveItem] = useState(0)
   const {
     carouselFragment,
@@ -77,7 +77,7 @@ function MyApp() {
     setActiveItem(data.nextItem)
   })
   useListenToCustomEvent('onSlideChange', (data) => {
-    console.log('onSlideChange', data)
+    console.log('onDrag', data)
   })
 
   return (
@@ -106,15 +106,4 @@ function MyApp() {
   )
 }
 
-const App = () => {
-  const [render, setRender] = useState(true)
-
-  return render ? (
-    <>
-      <button onClick={() => setRender(false)}>change</button>
-      <MyApp />
-    </>
-  ) : null
-}
-
 export default App

src/carouselTypes/useSpringCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, createContext, useCallback } from 'react'
+import React, { useRef, createContext, useCallback, useContext } from 'react'
 import { useSpring, config, animated, AnimationResult } from 'react-spring'
 import { useDrag } from 'react-use-gesture'
 import {
@@ -19,26 +19,20 @@ import {
   SlideActionType
 } from '../types'
 
-export const UseSpringCarouselContext = createContext<TransformCarouselContextProps>(
-  {
-    getIsFullscreen: () => false,
-    getIsPrevItem: () => false,
-    getIsNextItem: () => false,
-    slideToItem: () => {},
-    getIsAnimating: () => false,
-    getIsDragging: () => false,
-    getIsActiveItem: () => false,
-    enterFullscreen: () => {},
-    exitFullscreen: () => {},
-    slideToPrevItem: () => {},
-    slideToNextItem: () => {},
-    useListenToCustomEvent: () => {},
-    getCurrentActiveItem: () => ({
-      id: '',
-      index: 0
-    })
+const UseSpringCarouselContext = createContext<
+  TransformCarouselContextProps | undefined
+>(undefined)
+
+export function useSpringCarouselContext() {
+  const context = useContext(UseSpringCarouselContext)
+
+  if (!context) {
+    throw new Error(`useSpringCarouselContext isn't being used within the useSringCarousel context; 
+    use the context only inside a component that is rendered within the Carousel.`)
   }
-)
+
+  return context
+}
 
 export function useSpringCarousel({
   items,

src/carouselTypes/useTransitionCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useState } from 'react'
+import React, { createContext, useRef, useState, useContext } from 'react'
 import { useTransition, animated, config } from 'react-spring'
 import { useDrag } from 'react-use-gesture'
 import { prepareDataForCustomEvent } from '../index.utils'
@@ -13,20 +13,20 @@ import {
   SlideActionType
 } from '../types'
 
-const UseTransitionCarouselContext = createContext<TransitionCarouselContextProps>(
-  {
-    activeItem: 0,
-    slideToNextItem: () => {},
-    slideToPrevItem: () => {},
-    enterFullscreen: () => {},
-    exitFullscreen: () => {},
-    slideToItem: () => {},
-    getIsAnimating: () => false,
-    getIsPrevItem: () => false,
-    getIsNextItem: () => false,
-    useListenToCustomEvent: () => {}
+const UseTransitionCarouselContext = createContext<
+  TransitionCarouselContextProps | undefined
+>(undefined)
+
+export function useTransitionCarouselContext() {
+  const context = useContext(UseTransitionCarouselContext)
+
+  if (!context) {
+    throw new Error(`useTransitionCarouselContext isn't being used within the useTransitionCarousel context; 
+    use the context only inside a component that is rendered within the Carousel.`)
   }
-)
+
+  return context
+}
 
 export function useTransitionCarousel({
   items,
@@ -249,7 +249,6 @@ export function useTransitionCarousel({
     }
 
     setActiveItem(itemIndex)
-
     emitCustomEvent(
       'onSlideStartChange',
       prepareDataForCustomEvent<OnSlideStartChange>({