feat: export context for typescript (#235)

* export context

* Update index.d.ts

allows use of carousel context in typescript

* Update README.md

Author: seleb

README.md

@@ -63,6 +63,7 @@ Carousels: Love them or hate them.  However, if you are a React developer, and y
     * [<ButtonLast />](#buttonlast-)
     * [<ButtonPlay />](#buttonplay-)
     * [WithStore() Higher Order Component](#withstore-higher-order-component)
+    * [Hooks and `useContext`](#hooks-and-usecontext)
   * [TypeScript usage](#typescript-usage)
     * [WithStore() Higher Order Component](#withstore-higher-order-component-1)
     * [Examples](#examples)
@@ -531,6 +532,32 @@ __unsubscribeMasterSpinner__: 🔥 DON'T USE THIS.
 
 __unsubscribeAllMasterSpinner__: Don't call this manually unless you have some sort of super-customized carousel. This is called internally once all `<Image hasMasterSpinner />` and all `<ImageWithZoom hasMasterSpinner />` components are finished loading their images.  Calling this directly will force a "success" state and the master spinner (the spinner that covers the entire carousel while loading) will turn off.
 
+### Hooks and `useContext`
+
+If you'd like to consume the context via hooks rather than using the HoC approach described above, the context is exported as `CarouselContext`.
+
+Note that you will likely need to subscribe/unsubscribe to changes in order to take advantage of the context.
+
+Example:
+
+```js
+import React, { useContext } from 'react';
+import { CarouselContext } from 'pure-react-carousel';
+
+export function MyComponentUsingContext() {
+  const carouselContext = useContext(CarouselContext);
+  const [currentSlide, setCurrentSlide] = useState(carouselContext.state.currentSlide);
+  useEffect(() => {
+    function onChange() {
+      setCurrentSlide(carouselContext.state.currentSlide);
+    }
+    carouselContext.subscribe(onChange);
+    return () => carouselContext.unsubscribe(onChange);
+  }, [carouselContext]);
+  return `The current slide is: ${currentSlide}`;
+}
+```
+
 ## TypeScript usage
 The current bundled Typescript definitions are mostly complete. Certain edge case could have been not accounted for! Pull requests to improve them are welcome and appreciated.
 

src/index.js

@@ -3,7 +3,7 @@ export { default as ButtonFirst } from './ButtonFirst';
 export { default as ButtonNext } from './ButtonNext';
 export { default as ButtonLast } from './ButtonLast';
 export { default as ButtonPlay } from './ButtonPlay';
-export { default as CarouselProvider } from './CarouselProvider';
+export { default as CarouselProvider, CarouselContext } from './CarouselProvider';
 export { default as Dot } from './Dot';
 export { default as DotGroup } from './DotGroup';
 export { default as Image } from './Image';

typings/index.d.ts

@@ -52,6 +52,24 @@ interface CarouselState {
   readonly infinite: boolean
 }
 
+interface CarouselStoreInterface {
+  readonly state: CarouselState
+  readonly setStoreState: (state: Partial<CarouselState>) => void
+  readonly getStoreState: () => CarouselState
+  readonly subscribe: (func: () => void) => void
+  readonly unsubscribe: (func: () => void) => void
+  readonly updateSubscribers: (cb?: (state: CarouselState) => void) => void
+  readonly subscribeMasterSpinner: (src) => void
+  readonly unsubscribeMasterSpinner: (src) => false | object
+  readonly unsubscribeAllMasterSpinner: () => void
+  readonly masterSpinnerSuccess: (src) => void
+  readonly masterSpinnerError: (src) => void
+  readonly setMasterSpinnerFinished: () => void
+  readonly isMasterSpinnerFinished: () => boolean
+}
+
+declare const CarouselContext: React.Context<CarouselStoreInterface>
+
 interface CarouselProviderProps {
   readonly children: React.ReactNode
   readonly className?: string
@@ -94,10 +112,7 @@ type CarouselProviderInterface = React.ComponentClass<CarouselProviderProps>
 declare const CarouselProvider: CarouselProviderInterface
 
 export interface CarouselInjectedProps {
-  readonly carouselStore: {
-    readonly setStoreState: (state: Partial<CarouselState>) => void
-    readonly unsubscribeAllMasterSpinner: () => void
-  }
+  readonly carouselStore: CarouselStoreInterface
 }
 
 // Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
@@ -150,6 +165,8 @@ export {
   ButtonLast,
   ButtonNext,
   ButtonPlay,
+  CarouselStoreInterface,
+  CarouselContext,
   CarouselProvider,
   CarouselProviderProps,
   Dot,