Added support for a slide onActive function prop (#395)

Author: Carlos Paelinck

README.md

@@ -345,6 +345,7 @@ The slide tag represents each slide in the presentation. Giving a slide tag an `
 |maxHeight| PropTypes.number | Used to set max dimensions of the Slide.
 |maxWidth| PropTypes.number | Used to set max dimensions of the Slide.
 |notes| PropTypes.string| Text which will appear in the presenter mode. Can be HTML.
+|onActive|PropTypes.func| Optional function that is called with the slide index when the slide comes into view.
 |transition|PropTypes.array|Accepts `slide`, `zoom`, `fade`, `spin`, or a [function](#transition-function), and can be combined. Sets the slide transition. This will affect both enter and exit transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**|
 |transitionIn|PropTypes.array|Specifies the slide transition when the slide comes into view. Accepts the same values as transition.|
 |transitionOut|PropTypes.array|Specifies the slide transition when the slide exits. Accepts the same values as transition.|

example/src/index.js

@@ -58,6 +58,9 @@ export default class Presentation extends React.Component {
           <Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
         </Slide>
         <Slide
+          onActive={slideIndex => {
+            console.info(`Viewing slide index: ${slideIndex}.`); // eslint-disable-line no-console
+          }}
           id="wait-what"
           goTo={4}
           transition={[

src/components/slide.js

@@ -49,6 +49,10 @@ class Slide extends React.PureComponent {
     }
     window.addEventListener('load', this.setZoom);
     window.addEventListener('resize', this.setZoom);
+
+    if (isFunction(this.props.onActive)) {
+      this.props.onActive(this.props.slideIndex);
+    }
   }
 
   componentDidUpdate() {
@@ -253,6 +257,7 @@ Slide.propTypes = {
   lastSlideIndex: PropTypes.number,
   margin: PropTypes.number,
   notes: PropTypes.any,
+  onActive: PropTypes.func,
   presenterStyle: PropTypes.object,
   print: PropTypes.bool,
   slideIndex: PropTypes.number,

src/components/slide.test.js

@@ -63,4 +63,16 @@ describe('<Slide />', () => {
     wrapper.setState({ reverse: true });
     expect(wrapper.instance().getTransitionKeys()).toEqual(['fade']);
   });
+
+  test('should call optional callback when slide becomes active', () => {
+    const spy = jest.fn();
+    mount(
+      <Slide onActive={spy} slideIndex={5}>
+        <div>Slide Content</div>
+      </Slide>,
+      { context: _mockContext() }
+    );
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toBeCalledWith(5);
+  });
 });