dub-step - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

compositor.json

@@ -78,3 +78,3 @@ {
       },
-      "html": "<p></p><h1>\n  dub-step &#x1F57A;&#x1F3FD;\n    <br>\n    <img src=\"https://user-images.githubusercontent.com/1127238/30524706-690c72e0-9bad-11e7-9feb-4c76f572bdfc.png\">\n</h1><p></p>\n<p></p><p>Primitives for building index based UI widgets controlled by swipe, timers, and/or buttons.</p><p></p>\n<hr>\n\n<p><a href=\"https://travis-ci.org/infiniteluke/dub-step\"><img src=\"https://img.shields.io/travis/infiniteluke/dub-step.svg?style=flat-square\"></a>\n<a href=\"https://www.npmjs.com/package/dub-step\"><img src=\"https://img.shields.io/npm/v/dub-step.svg?style=flat-square\"></a>\n<a href=\"https://github.com/infiniteluke/dub-step/issues\"><img src=\"https://img.shields.io/github/issues/infiniteluke/dub-step.svg?style=flat-square\"></a>\n<a href=\"\"><img src=\"https://img.shields.io/coveralls/infiniteluke/dub-step.svg?style=flat-square\"></a>\n<a href=\"https://github.com/prettier/prettier\"><img src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square\"></a>\n<br>\n<a href=\"https://twitter.com/intent/tweet?text=Step%20through%20an%20index%20with%20style%20with%20dub-step.%20Check%20it%20out!%20https://github.com/infiniteluke/dub-step%20&#x1F57A;&#x1F3FD;&amp;url=%5Bobject%20Object%5D\"><img src=\"https://img.shields.io/twitter/url/https/github.com/infiniteluke/dub-step.svg?style=social\"></a>\n<a href=\"https://github.com/infiniteluke/dub-step/stargazers\"><img src=\"https://img.shields.io/github/stars/infiniteluke/dub-step.svg?style=social&amp;label=Star\"></a></p>\n<p>Many existing carousel/swipe solutions in one way or another end up dictating the markup of your UI. They expose many options to allow for extensibility, but this results in a convoluted API that is not flexible. In these cases, your often very specific design must be fit into an existing rigid solution.</p>\n<p>dub-step simply manages the state needed to power a carousel, slideshow, photo gallery, or even multi-step forms, allowing you to build the UI how you want. It uses the <a href=\"https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9\">function as child</a> and &quot;prop getter&quot; patterns, which gives you maximum flexibility with a minimal API.</p>\n<h2>Table of Contents</h2>\n<ul>\n<li><a href=\"#installation\">Installation</a></li>\n<li><a href=\"#usage\">Usage</a></li>\n<li><a href=\"#props\">Props</a></li>\n<li><a href=\"#control-props\">Control Props</a></li>\n<li><a href=\"#child-callback-function\">Child Callback Function</a></li>\n<li><a href=\"#examples\">Examples (WIP)</a></li>\n<li><a href=\"#credits\">Credits</a></li>\n</ul>\n<h2>Installation</h2>\n<p>This module is distributed via <a href=\"https://www.npmjs.com/package/dub-step\">npm</a> which is bundled with <a href=\"https://nodejs.org\">node</a> and\nshould be installed as one of your project&apos;s <code>dependencies</code>:</p>\n<pre>npm install --<span class=\"hljs-built_in\">save</span> dub-<span class=\"hljs-keyword\">step</span></pre><blockquote>\n<p>This package also depends on <code>react</code> and <code>prop-types</code>. Please make sure you\nhave those installed as well.</p>\n</blockquote>\n<h2>Usage</h2>\n<blockquote>\n<p>NOTE: Glamorous is used for styles in this example, but is not required.</p>\n</blockquote>\n<pre><span class=\"hljs-keyword\">import</span> DubStep <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;dub-step&apos;</span>;\n<span class=\"hljs-keyword\">import</span> glamorous, { Div, Img } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;glamorous&apos;</span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">BasicSlideshow</span>(<span class=\"hljs-params\">{slides, onChange}</span>) </span>{\n  <span class=\"hljs-keyword\">return</span> (\n    &lt;DubStep\n      cycle\n      pauseOnHover\n      duration={1500}\n      total={slides.length}\n    &gt;\n      {({\n        getNextControlProps,\n        getPreviousControlProps,\n        getPauseControlProps,\n        getPlayControlProps,\n        getIndexControlProps,\n        index\n      }) =&gt; (\n        &lt;section&gt;\n          &lt;Div width=&quot;350px&quot; overflow=&quot;hidden&quot; margin=&quot;0 auto&quot;&gt;\n            &lt;Div\n              display=&quot;flex&quot;\n              transform={`translate3d(${-index * 350}px, 0, 0)`}\n              transition=&quot;all .3s ease-in-out&quot;\n            &gt;\n              {slides.map((url, i) =&gt; &lt;Img src={url} alt=&quot;doge pic&quot; width=&quot;100%&quot; height=&quot;100%&quot; /&gt;)}\n            &lt;/Div&gt;\n          &lt;/Div&gt;\n          &lt;Div display=&quot;flex&quot; justifyContent=&quot;center&quot;&gt;\n            {slides.map((url, i) =&gt; (\n              &lt;Img\n                {...getIndexControlProps({ index: i })}\n                src={url}\n                width=&quot;30px&quot;\n                height=&quot;30px&quot;\n                margin=&quot;5px&quot;\n                padding=&quot;2px&quot;\n                border={i === index ? &apos;1px solid darkgray&apos; : &apos;none&apos;}\n                transform={`scale(${i === index ? 1.2 : 1})`}\n              /&gt;\n            ))}\n          &lt;/Div&gt;\n          &lt;Div display=&quot;flex&quot; justifyContent=&quot;center&quot;&gt;\n            &lt;button {...getPreviousControlProps()}&gt;Previous&lt;/button&gt;\n            &lt;button {...getNextControlProps()}&gt;Next&lt;/button&gt;\n            &lt;button {...getPlayControlProps()}&gt;Play&lt;/button&gt;\n            &lt;button {...getPauseControlProps()}&gt;Pause&lt;/button&gt;\n          &lt;/Div&gt;\n        &lt;/section&gt;\n      )}\n    &lt;/DubStep&gt;\n  );\n}\n\nconst DOGE_PICS = [\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;\n];\n\nfunction App() {\n  return (\n    &lt;BasicSlideshow\n      slides={DOGE_PICS}\n      onChange={currentIndex =&gt; console.log(currentIndex)}\n    /&gt;\n  )\n}</pre><p>Builds...<br>\n<img src=\"https://user-images.githubusercontent.com/1127238/30525038-b6b6cd5a-9bb3-11e7-9699-cac9f0bed3d2.gif\"></p>\n<p>In the example of above, the props returned by the get<em>ControlProps parameters empower any element in your UI to control the state of the slideshow. The index is used in coordination with a css transform/transition to animate the changing slides. \n<code>dub-step</code> is the only component. It doesn&apos;t render anything itself, it just calls the child function and renders that. Wrap everything in `{/</em> your function here! */}`.</p>\n<h2>Props</h2>\n<p>See the <a href=\"https://infiniteluke.github.io/dub-step/#dubstepproptypes\">API Docs</a> for information on the props exposed by this package.</p>\n<h2>Control Props</h2>\n<p>dub-step manages its own state internally and calls your <code>onChange</code>/<code>OnPlay</code>/<code>OnPause</code> etc. handlers with any relevant changes. The controllable state that dub-step manages includes: <code>index</code> and <code>paused</code>. Your child callback function (read more below) can be used to manipulate this state from within the render function and can likely support many of your use cases.</p>\n<p>However, if more control is needed, you can pass any of these pieces of state as a prop (as indicated above) and that state becomes controlled. As soon as <code>this.props[controllableStatePropKey] !== undefined</code>, internally, dub-step will determine its state based on your prop&apos;s value rather than its own internal state. You will be required to keep the state up to date, but you can also control the state from anywhere, be that state from other components, redux, react-router, or anywhere else.</p>\n<h2>Child Callback Function</h2>\n<p>This is where you render whatever you want to based on the state of dub-step. The function is passed as the child prop:</p>\n<pre>&lt;DubStep&gt;\n  {({<span class=\"hljs-comment\">/* parameters here */</span>}) =&gt; (<span class=\"hljs-comment\">/* your render code here*/</span>)}\n&lt;<span class=\"hljs-regexp\">/DubStep&gt;</span></pre><p>The paramters of this function can be split into three categories: State, Prop getters, and Actions.</p>\n<p>See the <a href=\"https://infiniteluke.github.io/dub-step/#stateandhelpers\">API Docs</a> for a list of these properties.</p>\n<h2>Examples</h2>\n<p>These are not yet available on github. But check out the codesandbox until they are! Fork it and build your own examples then <a href=\"https://twitter.com/lukeherrington\">tweet me</a> about it!</p>\n<p><a href=\"https://codesandbox.io/s/p5vr4pq897\"><img src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"></a></p>\n<p>Here are some of the existing examples:<br>\n<img src=\"https://user-images.githubusercontent.com/1127238/30551187-8d947314-9c4e-11e7-8d73-7d5f131c36ca.gif\"></p>\n<h2>Credits</h2>\n<p><a href=\"github.com/kentcdodds\">Kent Dodds&apos;</a> work on <a href=\"https://github.com/paypal/downshift/\">downshift &#x1F3CE;</a> heavily inspired this package. You may even notice some copy pasta in the README &#x1F60F;.</p>\n<p>This package is also inspired by work I rubber-ducked with <a href=\"https://github.com/flipactual/\">flip</a> for managing focus in a TV Shelf UI.</p>\n<p>Much of the swipe code was lifted from <a href=\"https://github.com/akiran/react-slick/\">react-slick</a> by <a href=\"https://github.com/akiran\">akiran</a> a very solid solution for swipe friendly carousels.</p>\n<p>There is no lack of carousel libraries out there. I looked at many of them while writting this package. I hope dub-step represents a move towards an unopinionated solution that enables design and development to work together not against each other.</p>\n<p>Check out other solutions on <a href=\"https://www.npmjs.com/search?q=carousel%20swipe%20react&amp;page=1&amp;ranking=optimal\">npm</a>.</p>\n<p>Some of the time spent writting this package was sponsored by <a href=\"https://www.fourkitchens.com/\">Four Kitchens</a>. I &#x2764;&#xFE0F; 4K. Come <a href=\"https://www.fourkitchens.com/careers/\">work with us</a>!</p>\n<p><a href=\"https://www.fourkitchens.com\">\n  <img src=\"https://www.fourkitchens.com/wp-content/themes/twentysixteen-4k/img/logos/4k-logo.svg\">\n</a></p>\n<h2>License</h2>\n<p>MIT</p>\n"
+      "html": "<p></p><h1>\n  dub-step &#x1F57A;&#x1F3FD;\n    <br>\n    <img src=\"https://user-images.githubusercontent.com/1127238/30524706-690c72e0-9bad-11e7-9feb-4c76f572bdfc.png\">\n</h1><p></p>\n<p></p><p>Primitives for building step/index based UI widgets controlled by swipe, timers, and/or buttons.</p><p></p>\n<hr>\n\n<p><a href=\"https://travis-ci.org/infiniteluke/dub-step\"><img src=\"https://img.shields.io/travis/infiniteluke/dub-step.svg?style=flat-square\"></a>\n<a href=\"https://www.npmjs.com/package/dub-step\"><img src=\"https://img.shields.io/npm/v/dub-step.svg?style=flat-square\"></a>\n<a href=\"https://github.com/infiniteluke/dub-step/issues\"><img src=\"https://img.shields.io/github/issues/infiniteluke/dub-step.svg?style=flat-square\"></a>\n<a href=\"\"><img src=\"https://img.shields.io/coveralls/infiniteluke/dub-step.svg?style=flat-square\"></a>\n<a href=\"https://github.com/prettier/prettier\"><img src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square\"></a>\n<br>\n<a href=\"https://twitter.com/intent/tweet?text=Step%20through%20an%20index%20with%20style%20with%20dub-step.%20Check%20it%20out!%20https://github.com/infiniteluke/dub-step%20&#x1F57A;&#x1F3FD;&amp;url=%5Bobject%20Object%5D\"><img src=\"https://img.shields.io/twitter/url/https/github.com/infiniteluke/dub-step.svg?style=social\"></a>\n<a href=\"https://github.com/infiniteluke/dub-step/stargazers\"><img src=\"https://img.shields.io/github/stars/infiniteluke/dub-step.svg?style=social&amp;label=Star\"></a></p>\n<p>Many existing carousel/swipe solutions in one way or another end up dictating the markup of your UI. They expose many options to allow for extensibility, but this results in a convoluted API that is not flexible. In these cases, your often very specific design must be fit into an existing rigid solution.</p>\n<p>dub-step simply manages the state needed to power a carousel, slideshow, photo gallery, or even multi-step forms, allowing you to build the UI how you want. It uses the <a href=\"https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9\">function as child</a> and &quot;prop getter&quot; patterns, which gives you maximum flexibility with a minimal API.</p>\n<p><em>NOTE: Version v0.0.5 introduced a breaking change. All occurences of <code>index</code> in the dub-step API were renamed to <code>step</code>, for consistency. Please see <a href=\"https://infiniteluke.github.io/dub-step\">the docs</a> for more info.</em></p>\n<h2>Table of Contents</h2>\n<ul>\n<li><a href=\"#installation\">Installation</a></li>\n<li><a href=\"#usage\">Usage</a></li>\n<li><a href=\"#props\">Props</a></li>\n<li><a href=\"#control-props\">Control Props</a></li>\n<li><a href=\"#child-callback-function\">Child Callback Function</a></li>\n<li><a href=\"#examples\">Examples (WIP)</a></li>\n<li><a href=\"#credits\">Credits</a></li>\n</ul>\n<h2>Installation</h2>\n<p>This module is distributed via <a href=\"https://www.npmjs.com/package/dub-step\">npm</a> which is bundled with <a href=\"https://nodejs.org\">node</a> and\nshould be installed as one of your project&apos;s <code>dependencies</code>:</p>\n<pre>npm install --<span class=\"hljs-built_in\">save</span> dub-<span class=\"hljs-keyword\">step</span></pre><blockquote>\n<p>This package also depends on <code>react</code> and <code>prop-types</code>. Please make sure you\nhave those installed as well.</p>\n</blockquote>\n<h2>Usage</h2>\n<blockquote>\n<p>NOTE: Glamorous is used for styles in this example, but is not required.</p>\n</blockquote>\n<pre><span class=\"hljs-keyword\">import</span> DubStep <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;dub-step&apos;</span>;\n<span class=\"hljs-keyword\">import</span> glamorous, { Div, Img } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;glamorous&apos;</span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">BasicSlideshow</span>(<span class=\"hljs-params\">{slides, onChange}</span>) </span>{\n  <span class=\"hljs-keyword\">return</span> (\n    &lt;DubStep\n      cycle\n      pauseOnHover\n      duration={1500}\n      total={slides.length}\n    &gt;\n      {({\n        Next,\n        Previous,\n        Pause,\n        Play,\n        StepIndex,\n        step\n      }) =&gt; (\n        &lt;section&gt;\n          &lt;Div width=&quot;350px&quot; overflow=&quot;hidden&quot; margin=&quot;0 auto&quot;&gt;\n            &lt;Div\n              display=&quot;flex&quot;\n              transform={`translate3d(${-step * 350}px, 0, 0)`}\n              transition=&quot;all .3s ease-in-out&quot;\n            &gt;\n              {slides.map((url, i) =&gt; &lt;Img src={url} alt=&quot;doge pic&quot; width=&quot;100%&quot; height=&quot;100%&quot; /&gt;)}\n            &lt;/Div&gt;\n          &lt;/Div&gt;\n          &lt;Div display=&quot;flex&quot; justifyContent=&quot;center&quot;&gt;\n            {slides.map((url, i) =&gt; (\n              &lt;StepIndex\n                component={Img}\n                key={i}\n                src={url}\n                width=&quot;30px&quot;\n                height=&quot;30px&quot;\n                margin=&quot;5px&quot;\n                padding=&quot;2px&quot;\n                border={i === step ? &apos;1px solid darkgray&apos; : &apos;none&apos;}\n                transform={`scale(${i === step ? 1.2 : 1})`}\n              /&gt;\n            ))}\n          &lt;/Div&gt;\n          &lt;Div display=&quot;flex&quot; justifyContent=&quot;center&quot;&gt;\n            &lt;Previous&gt;Previous&lt;/Previous&gt;\n            &lt;Next&gt;Next&lt;/Next&gt;\n            &lt;Play&gt;Play&lt;/Play&gt;\n            &lt;Pause&gt;Pause&lt;/Pause&gt;\n          &lt;/Div&gt;\n        &lt;/section&gt;\n      )}\n    &lt;/DubStep&gt;\n  );\n}\n\nconst DOGE_PICS = [\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;,\n  &apos;http://doge2048.com/meta/doge-600.png&apos;\n];\n\nfunction App() {\n  return (\n    &lt;BasicSlideshow\n      slides={DOGE_PICS}\n      onChange={currentIndex =&gt; console.log(currentIndex)}\n    /&gt;\n  )\n}</pre><p>Builds...<br>\n<img src=\"https://user-images.githubusercontent.com/1127238/30525038-b6b6cd5a-9bb3-11e7-9699-cac9f0bed3d2.gif\"></p>\n<p>In the example of above, the <code>step</code> is used in coordination with a css transform/transition to animate the changing slides.</p>\n<h2>Props</h2>\n<p>See the <a href=\"https://infiniteluke.github.io/dub-step/#dubstepproptypes\">API Docs</a> for information on the props exposed by this package.</p>\n<h2>Control Props</h2>\n<p>dub-step manages its own state internally and calls your <code>onChange</code>/<code>OnPlay</code>/<code>OnPause</code> etc. handlers with any relevant changes. The controllable state that dub-step manages includes: <code>step</code> and <code>paused</code>. Your child callback function (read more below) can be used to manipulate this state from within the render function and can likely support many of your use cases.</p>\n<p>However, if more control is needed, you can pass any of these pieces of state as a prop (as indicated above) and that state becomes controlled. As soon as <code>this.props[controllableStatePropKey] !== undefined</code>, internally, dub-step will determine its state based on your prop&apos;s value rather than its own internal state. You will be required to keep the state up to date, but you can also control the state from anywhere, be that state from other components, redux, react-router, or anywhere else.</p>\n<h2>Child Callback Function</h2>\n<p>This is where you render whatever you want to based on the state of dub-step. The function is passed as the child prop:</p>\n<pre>&lt;DubStep&gt;\n  {({<span class=\"hljs-comment\">/* parameters here */</span>}) =&gt; (<span class=\"hljs-comment\">/* your render code here*/</span>)}\n&lt;<span class=\"hljs-regexp\">/DubStep&gt;</span></pre><p>The paramters of this function can be split into three categories: State, Components, and Actions.</p>\n<p>See the <a href=\"https://infiniteluke.github.io/dub-step/#stateandhelpers\">API Docs</a> for a list of these properties.</p>\n<h2>Examples</h2>\n<p>These are not yet available on github. But check out the codesandbox until they are! Fork it and build your own examples then <a href=\"https://twitter.com/lukeherrington\">tweet me</a> about it!</p>\n<p><a href=\"https://codesandbox.io/s/p5vr4pq897\"><img src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"></a></p>\n<p>Here are some of the existing examples:<br>\n<img src=\"https://user-images.githubusercontent.com/1127238/30551187-8d947314-9c4e-11e7-8d73-7d5f131c36ca.gif\"></p>\n<h2>Credits</h2>\n<p><a href=\"github.com/kentcdodds\">Kent Dodds&apos;</a> work on <a href=\"https://github.com/paypal/downshift/\">downshift &#x1F3CE;</a> heavily inspired this package. You may even notice some copy pasta in the README &#x1F60F;.</p>\n<p>This package is also inspired by work I rubber-ducked with <a href=\"https://github.com/flipactual/\">flip</a> for managing focus in a TV Shelf UI.</p>\n<p>Much of the swipe code was lifted from <a href=\"https://github.com/akiran/react-slick/\">react-slick</a> by <a href=\"https://github.com/akiran\">akiran</a> a very solid solution for swipe friendly carousels.</p>\n<p>There is no lack of carousel libraries out there. I looked at many of them while writting this package. I hope dub-step represents a move towards an unopinionated solution that enables design and development to work together not against each other.</p>\n<p>Check out other solutions on <a href=\"https://www.npmjs.com/search?q=carousel%20swipe%20react&amp;page=1&amp;ranking=optimal\">npm</a>.</p>\n<p>Some of the time spent writting this package was sponsored by <a href=\"https://www.fourkitchens.com/\">Four Kitchens</a>. I &#x2764;&#xFE0F; 4K. Come <a href=\"https://www.fourkitchens.com/careers/\">work with us</a>!</p>\n<p><a href=\"https://www.fourkitchens.com\">\n  <img src=\"https://www.fourkitchens.com/wp-content/themes/twentysixteen-4k/img/logos/4k-logo.svg\">\n</a></p>\n<h2>License</h2>\n<p>MIT</p>\n"
     },
@@ -81,0 +81,0 @@ {

package.json

 {
   "name": "dub-step",
-  "version": "0.0.4",
-  "description": "A set of primitives for building index based UI widgets controlled by swipe, timers, and/or buttons.",
+  "version": "0.0.5",
+  "description": "A set of primitives for building step/index based UI widgets controlled by swipe, timers, and/or buttons.",
   "main": "dist/dub-step.js",
@@ -14,2 +14,3 @@ "repository": "[e-mail]:infiniteluke/dub-step.git",
     "index",
+    "step",
     "accessibility",
@@ -50,3 +51,5 @@ "WAI-ARIA",
     "documentation": "^5.3.2",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-15": "^1.0.0",
+    "enzyme-to-json": "^3.0.1",
     "eslint": "^4.7.0",
@@ -87,4 +90,15 @@ "eslint-config-airbnb": "^15.1.0",
     "testMatch": [
-      "<rootDir>/src/__tests__/**/*.js"
-    ]
+      "<rootDir>/__tests__/**/*.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "setupFiles": [
+      "<rootDir>/testSetup.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/node_modules/",
+      "<rootDir>/testSetup.js"
+    ],
+    "clearMocks": true
   },
@@ -91,0 +105,0 @@ "lint-staged": {

README.md

@@ -6,3 +6,3 @@ <h1 align="center">
 </h1>
-<p align="center">Primitives for building index based UI widgets controlled by swipe, timers, and/or buttons.</p>
+<p align="center">Primitives for building step/index based UI widgets controlled by swipe, timers, and/or buttons.</p>
 <hr />
@@ -23,2 +23,4 @@
 
+_NOTE: Version v0.0.5 introduced a breaking change. All occurences of `index` in the dub-step API were renamed to `step`, for consistency. Please see [the docs](https://infiniteluke.github.io/dub-step) for more info._
+
 ## Table of Contents
@@ -62,8 +64,8 @@
       {({
-        getNextControlProps,
-        getPreviousControlProps,
-        getPauseControlProps,
-        getPlayControlProps,
-        getIndexControlProps,
-        index
+        Next,
+        Previous,
+        Pause,
+        Play,
+        StepIndex,
+        step
       }) => (
@@ -74,3 +76,3 @@ <section>
               display="flex"
-              transform={`translate3d(${-index * 350}px, 0, 0)`}
+              transform={`translate3d(${-step * 350}px, 0, 0)`}
               transition="all .3s ease-in-out"
@@ -83,4 +85,5 @@ >
             {slides.map((url, i) => (
-              <Img
-                {...getIndexControlProps({ index: i })}
+              <StepIndex
+                component={Img}
+                key={i}
                 src={url}
@@ -91,4 +94,4 @@ width="30px"
                 padding="2px"
-                border={i === index ? '1px solid darkgray' : 'none'}
-                transform={`scale(${i === index ? 1.2 : 1})`}
+                border={i === step ? '1px solid darkgray' : 'none'}
+                transform={`scale(${i === step ? 1.2 : 1})`}
               />
@@ -98,6 +101,6 @@ ))}
           <Div display="flex" justifyContent="center">
-            <button {...getPreviousControlProps()}>Previous</button>
-            <button {...getNextControlProps()}>Next</button>
-            <button {...getPlayControlProps()}>Play</button>
-            <button {...getPauseControlProps()}>Pause</button>
+            <Previous>Previous</Previous>
+            <Next>Next</Next>
+            <Play>Play</Play>
+            <Pause>Pause</Pause>
           </Div>
@@ -130,4 +133,3 @@ </section>
 
-In the example of above, the props returned by the get*ControlProps parameters empower any element in your UI to control the state of the slideshow. The index is used in coordination with a css transform/transition to animate the changing slides. 
-`dub-step` is the only component. It doesn't render anything itself, it just calls the child function and renders that. Wrap everything in `<DubStep>{/* your function here! */}</DubStep>`.
+In the example of above, the `step` is used in coordination with a css transform/transition to animate the changing slides.
 
@@ -140,3 +142,3 @@ ## Props
 
-dub-step manages its own state internally and calls your `onChange`/`OnPlay`/`OnPause` etc. handlers with any relevant changes. The controllable state that dub-step manages includes: `index` and `paused`. Your child callback function (read more below) can be used to manipulate this state from within the render function and can likely support many of your use cases.
+dub-step manages its own state internally and calls your `onChange`/`OnPlay`/`OnPause` etc. handlers with any relevant changes. The controllable state that dub-step manages includes: `step` and `paused`. Your child callback function (read more below) can be used to manipulate this state from within the render function and can likely support many of your use cases.
 
@@ -153,3 +155,3 @@ However, if more control is needed, you can pass any of these pieces of state as a prop (as indicated above) and that state becomes controlled. As soon as `this.props[controllableStatePropKey] !== undefined`, internally, dub-step will determine its state based on your prop's value rather than its own internal state. You will be required to keep the state up to date, but you can also control the state from anywhere, be that state from other components, redux, react-router, or anywhere else.
 
-The paramters of this function can be split into three categories: State, Prop getters, and Actions.
+The paramters of this function can be split into three categories: State, Components, and Actions.
 
@@ -156,0 +158,0 @@ See the [API Docs](https://infiniteluke.github.io/dub-step/#stateandhelpers) for a list of these properties.

src/dub-step.js

@@ -1,2 +0,2 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -12,3 +12,3 @@ import { callAll, unwrapArray, getSign } from './utils';
  * </h1>
- * <p align="center">Primitives for building index based UI widgets controlled by swipe, timers, and/or buttons.</p>
+ * <p align="center">Primitives for building step based UI widgets controlled by swipe, timers, and/or buttons.</p>
  * <hr />
@@ -19,7 +19,7 @@ * </br>
  *
- * dub-step provides an API for updating an index.
- * - Directly when passed to getIndexControlProps(index) or an "action" is called.
- * - Incrementally when getNextControlProps/getPreviousControlProps is applied to a button.
- * - On swipe when getSlideProps is applied to a container of "slides".
- * - On a timer when getPlayControlProps/getPauseControlProps are applied to a button.
+ * dub-step provides an API for updating the state of an index or "step".
+ * - Directly when an "action" like `next` is called.
+ * - Incrementally when the provided Next/Previous components are clicked.
+ * - On swipe when a Step component is swiped.
+ * - On a timer when the provided Play/Pause components are clicked.
  *
@@ -29,25 +29,25 @@ */
   /**
-   * These props affect how/when the index and associated state is updated.
+   * These props affect how/when the step and associated state is updated.
    *
    * @type {object}
-   * @property {number} total - The total number of slides. Defaults to `0`.
-   * @property {number} defaultIndex - The initial index of dub-step. Defaults to `0`.
+   * @property {number} total - The total number of steps. Defaults to `0`.
+   * @property {number} defaultStep - The initial step of dub-step. Defaults to `0`.
    * @property {boolean} cycle - Whether or not dub-step should cycle. Defaults to `false`.
-   * @property {number} stepInterval - The number of slides to interate when navigating. Defaults to `1`.
+   * @property {number} stepInterval - The number of steps to interate when navigating. Defaults to `1`.
    * @property {boolean} autoPlay - Should dub-step autoPlay? Defaults to `false`.
-   * @property {number} duration - How long should each slide wait? Defaults to `0`.
-   * @property {boolean} vertical - Are the slides changing vertically? Defaults to `false`.
-   * @property {boolean} swipe - Are the slides swipable? Defaults to `false`.
-   * @property {boolean} draggable - Are the slides draggable on desktop? Defaults to `false`.
+   * @property {number} duration - How long should each step wait? Defaults to `0`.
+   * @property {boolean} vertical - Are the steps changing vertically? Defaults to `false`.
+   * @property {boolean} swipe - Are the steps swipable? Defaults to `false`.
+   * @property {boolean} draggable - Are the steps draggable on desktop? Defaults to `false`.
    * @property {boolean} pauseOnHover - Should dub-step pause on hover? Defaults to `false`.
-   * @property {number} touchThreshold - How much it takes to change slides. Defaults to `20`.
-   * @property {number} swipeIterateOnly - Regardless of swipe direction, the index will be iterated. Defaults to `false`.
+   * @property {number} touchThreshold - How much it takes to change steps. Defaults to `20`.
+   * @property {number} swipeIterateOnly - Regardless of swipe direction, the step is iterated. Defaults to `false`.
    * @property {number} animationSpeed - The transition animation speed. Defaults to `0`.
-   * @property {function} onBeforeChange - Called immediately before the slide is changed. Defaults to `() => {}`.
-   * @property {function} onChange - Called once the slide has changed. Defaults to `() => {}`.
-   * @property {function} onAfterChange - Called after the slide has changed and after animationSpeed seconds if present. Defaults to `() => {}`.
+   * @property {function} onBeforeChange - Called immediately before the step is changed. Defaults to `() => {}`.
+   * @property {function} onChange - Called once the step has changed. Defaults to `() => {}`.
+   * @property {function} onAfterChange - Called after the step has changed and after animationSpeed seconds if present. Defaults to `() => {}`.
    * @property {function} onPlay - Called when played. Defaults to `() => {}`.
    * @property {function} onPause - Called when paused. Defaults to `() => {}`.
-   * @property {function} onNext - Called when iterating to the next slide. Defaults to `() => {}`.
-   * @property {function} onPrevious - Called when iterating to the previous slide. Defaults to `() => {}`.
+   * @property {function} onNext - Called when iterating to the next step. Defaults to `() => {}`.
+   * @property {function} onPrevious - Called when iterating to the previous step. Defaults to `() => {}`.
    * @property {function} onSwipeStart - Called when swiping/dragging has begun. Defaults to `() => {}`.
@@ -60,3 +60,3 @@ * @property {function} onSwipeMove - Called when a swipe/drag is moved. Warning: This gets called _a lot_. Defaults to `() => {}`.
     total: PropTypes.number,
-    defaultIndex: PropTypes.number,
+    defaultStep: PropTypes.number,
     cycle: PropTypes.bool,
@@ -88,3 +88,3 @@ stepInterval: PropTypes.number,
     total: 0,
-    defaultIndex: 0,
+    defaultStep: 0,
     stepInterval: 1,
@@ -126,16 +126,16 @@ cycle: false,
    * @private
-   * @property {number} index - The current index of dub-step. Controlled.
-   * @property {boolean} paused - Is dub-step paused? Controlled.
-   * @property {boolean} animating - Is the slide transition animating?
-   * @property {boolean} swiping - Has the swipe threshold been reached?
-   * @property {boolean} dragging - Has the slide been initially dragged?
-   * @property {number} swipeLeftDistance - A number representing the distance slide has been dragged horizontally.
-   * @property {number} swipeDownDistance - A number representing the distance slide has been dragged vertically.
-   * @property {boolean} swiped - Has the slide been dragged enough to be moved to the next/previous slide?
-   * @property {number} swipeRatio - A number between 0 and 1 with nearness to 1 representing closeness to being swiped.
-   * @property {number} swipeDirectionSign - Either 1 or -1. 1 representing right and -1 representing left.
-   * @property {object} touchObject - Holds meta data used to calculate the swipe state.
+   * @property {number} step - state - The current step of dub-step. Controlled.
+   * @property {boolean} paused - state - Is dub-step paused? Controlled.
+   * @property {boolean} animating - state - Is the step component transition animating?
+   * @property {boolean} swiping - state - Has the swipe threshold been reached?
+   * @property {boolean} dragging - state - Has the step component been initially dragged?
+   * @property {number} swipeLeftDistance - state - A number representing the distance the step component has been dragged horizontally.
+   * @property {number} swipeDownDistance - state - A number representing the distance the step component has been dragged vertically.
+   * @property {boolean} swiped - state - Has the step component been dragged enough to be moved to the next/previous step?
+   * @property {number} swipeRatio - state - A number between 0 and 1 with nearness to 1 representing closeness to being swiped.
+   * @property {number} swipeDirectionSign - state - Either 1 or -1. 1 representing right and -1 representing left.
+   * @property {object} touchObject - Holds meta data used to calculate the swipe state. Not exposed through getStateAndHelpers.
    */
   state = {
-    index: this.getControlledProp('index', { index: this.props.defaultIndex }),
+    step: this.getControlledProp('step', { step: this.props.defaultStep }),
     paused: this.getControlledProp('paused', {
@@ -170,3 +170,4 @@ paused: !this.props.autoPlay,
       (this.props.duration &&
-        this.getControlledProp('index') === this.props.total - 1)
+        !this.props.cycle &&
+        this.getControlledProp('step') === this.props.total - 1)
     ) {
@@ -183,3 +184,3 @@ this.interval = this.stopPlaying();
 
-  getSlideProps = (props = {}) => ({
+  getStepProps = (props = {}) => ({
     ...props,
@@ -194,3 +195,3 @@ onMouseDown: callAll(props.onMouseDown, this.swipeStart),
       props.onMouseLeave,
-      this.state.dragging ? this.swipeEnd : () => {}
+      this.state.dragging ? this.swipeEnd : this.mouseLeave
     ),
@@ -230,12 +231,12 @@ onTouchStart: callAll(props.onTouchStart, this.swipeStart),
   });
-  getIndexControlProps = ({ index, ...rest } = { index: 0 }) => ({
+  getStepControlProps = ({ step, ...rest } = { step: 0 }) => ({
     'aria-label': 'change',
     ...rest,
-    onClick: callAll(rest.onClick, () => this.changeSlide(index)),
+    onClick: callAll(rest.onClick, () => this.changeSlide(step)),
   });
 
-  setIndexState = (nextState, callback = () => {}) => {
+  setStepState = (nextState, callback = () => {}) => {
     this.interval = this.stopPlaying();
-    if (this.isPropControlled('index')) {
-      this.props.onChange(nextState.index, this.getStateAndHelpers());
+    if (this.isPropControlled('step')) {
+      this.props.onChange(nextState.step, this.getStateAndHelpers());
       callback();
@@ -252,3 +253,3 @@ } else {
         this.props.onChange(
-          this.getControlledProp('index'),
+          this.getControlledProp('step'),
           this.getStateAndHelpers()
@@ -268,37 +269,37 @@ );
 
-  getNextIndex(index = this.getControlledProp('index')) {
+  getNextStep(step = this.getControlledProp('step')) {
     if (this.props.total) {
       if (this.props.cycle) {
-        if (index + this.props.stepInterval > this.props.total - 1) {
+        if (step + this.props.stepInterval > this.props.total - 1) {
           return 0;
         }
-      } else if (index + this.props.stepInterval > this.props.total - 1) {
+      } else if (step + this.props.stepInterval > this.props.total - 1) {
         return this.props.total - 1;
       }
     }
-    return index + this.props.stepInterval;
+    return step + this.props.stepInterval;
   }
 
-  getPreviousIndex(index = this.getControlledProp('index')) {
+  getPreviousStep(step = this.getControlledProp('step')) {
     if (this.props.total) {
       if (this.props.cycle) {
-        if (index - this.props.stepInterval < 0) {
+        if (step - this.props.stepInterval < 0) {
           return this.props.total - 1;
         }
-      } else if (index - this.props.stepInterval < 0) {
+      } else if (step - this.props.stepInterval < 0) {
         return 0;
       }
     }
-    return index - this.props.stepInterval;
+    return step - this.props.stepInterval;
   }
 
-  getValidIndex(indexOffset) {
+  getValidStep(stepOffset) {
     if (this.props.total) {
       if (this.props.cycle) {
-        return this.getControlledProp('index') + indexOffset - this.props.total;
+        return this.getControlledProp('step') + stepOffset - this.props.total;
       }
-      if (this.getControlledProp('index') + indexOffset < 0) {
+      if (this.getControlledProp('step') + stepOffset < 0) {
         return 0;
       } else if (
-        this.getControlledProp('index') + indexOffset >
+        this.getControlledProp('step') + stepOffset >
         this.props.total - 1
@@ -309,3 +310,3 @@ ) {
     }
-    return this.getControlledProp('index') + indexOffset;
+    return this.getControlledProp('step') + stepOffset;
   }
@@ -316,8 +317,9 @@
    *
-   * The paramters of this function can be split into three categories: State, Prop getters, and Actions.
+   * The paramters of this function can be split into 4 categories: State, Components, Actions.
    * - *State:* State properties of dub-step exposed to your render code. Controlled state can be passed as a prop and "controlled"
    *  by an outside component/router/store.
-   * - *Prop getters:* Functions named like get*ControlProps. They are used to apply props to the elements that you render.
-   *  This gives you maximum flexibility to render what, when, and wherever you like.
-   *  You call these on the element in question (for example: `<button {...getNextControlProps()}))>Next</button>`.
+   * - *Components* Components that control the current step. They take a `component` prop which allows you to control your UI,
+   *  add internal props, and pass through any additional props you add. Examples include: Step, Next, Previous, Play, Pause.
+   *  _NOTE:_ Each component has an alternative and respective "prop getter", if that pattern is preferred. These are functions named get*ControlProps.
+   *  Call/spread these on the element you're rendering for a given purpose. For example: `<button {...getNextControlProps(otherProps)}))>Next</button>`.
    *  It's advisable to pass all your props to that function rather than applying them on the element yourself to avoid your props being overridden (or overriding the props returned).
@@ -328,28 +330,28 @@ * - *Actions:* Call these to directly change the state of dub-step.
    *
-   * @property {number} index - state - The current index of dub-step. Controlled.
+   * @property {number} step - state - The current step of dub-step. Controlled.
    * @property {boolean} paused - state - Is dub-step paused? Controlled.
-   * @property {boolean} animating - state - Is the slide transition animating?
+   * @property {boolean} animating - state - Is the step component transition animating?
    * @property {boolean} swiping - state - Has the swipe threshold been reached?
-   * @property {boolean} dragging - state - Has the slide been initially dragged?
-   * @property {number} swipeLeftDistance - state - A number representing the distance slide has been dragged horizontally.
-   * @property {number} swipeDownDistance - state - A number representing the distance slide has been dragged vertically.
-   * @property {boolean} swiped - state - Has the slide been dragged enough to be moved to the next/previous slide?
+   * @property {boolean} dragging - state - Has the step component been initially dragged?
+   * @property {number} swipeLeftDistance - state - A number representing the distance the step component has been dragged horizontally.
+   * @property {number} swipeDownDistance - state - A number representing the distance the step component has been dragged vertically.
+   * @property {boolean} swiped - state - Has the step component been dragged enough to be moved to the next/previous step?
    * @property {number} swipeRatio - state - A number between 0 and 1 with nearness to 1 representing closeness to being swiped.
    * @property {number} swipeDirectionSign - state - Either 1 or -1. 1 representing right and -1 representing left.
-   * @property {function} getNextControlProps - Prop getter - Returns the props you should apply to a next button element you render.
-   *    This button will be responsible for incrementing the index by the stepInterval value.
-   * @property {function} getPreviousControlProps - Prop getter - Returns the props you should apply to a previous/back button element you render.
-   *    This button will be responsible for decrementing the index by the stepInterval value.
-   * @property {function} getPauseControlProps - Prop getter - Returns the props you should apply to a previous button element you render.
-   *    This button will be responsible for decrementing the index by the stepInterval value.
-   * @property {function} getPlayControlProps - Prop getter - Returns the props you should apply to a play button element you render.
-   *    This button will be responsible for starting an internal interval that increments the index by the stepInterval value.
-   * @property {function} getPauseControlProps - Prop getter - Returns the props you should apply to a pause button element you render.
-   *    This button will be responsible for clearing an internal interval that increments the index by the stepInterval value.
-   * @property {function} getIndexControlProps - Prop getter - Returns the props you should apply to an element you render that sets the index of dub-step.
-   *    This button will be responsible for setting the index of dub-step. _NOTE: It takes an object with an index property as a parameter._
-   * @property {function} getSlideProps - Prop getter - Returns the props you should apply to an element you render that is expected to have swipe/drag interactions.
-   *    This button will be responsible for tracking touch/drag interactions and sets dub-steps swipe state properties respectively.
-   * @property {function} next - Action - Increments the index by the stepInterval.
-   * @property {function} previous - Action - Decrements the index by the stepInterval.
+   * 
+   * @property {ReactElement} Step - Component - This component is responsible for tracking touch/drag interactions and sets dub-steps swipe state properties respectively.
+   *  Alternatively, use `getStepProps` if you prefer the prop getter patern. Returns the props you should apply to an element you render that is expected to have swipe/drag interactions.
+   * @property {ReactElement} Next - Component - This component is responsible for incrementing the step by the stepInterval value.
+   *  Alternatively, use `getNextControlProps` if you prefer the prop getter pattern. It returns the props you should apply to a next button element you render.
+   * @property {ReactElement} Previous - Component - This component is responsible for decrementing the step by the stepInterval value.
+   *  Alternatively, use `getPreviousControlProps` if you prefer the prop getter patern. It returns the props you should apply to a previous/back button element you render.
+   * @property {ReactElement} Play - Component - This component is responsible for starting an internal interval that increments the step by the stepInterval value.
+   *  Alternatively, use `getPlayControlProps` if you prefer the prop getter patern. It returns the props you should apply to a play button element you render.
+   * @property {ReactElement} Pause - Component - This component is responsible for clearing an internal interval that increments the step by the stepInterval value.
+   *  Alternatively, use `getPauseControlProps` if you prefer the prop getter patern. It returns the props you should apply to a pause button element you render.
+   * @property {ReactElement} StepIndex - Component - This component is responsible for setting the current step of dub-step. _NOTE: It takes a step prop representing the step to which dub-step should change._
+   *  Alternatively, use `getStepControlProps` if you prefer the prop getter patern. It returns the props you should apply to an element you render that sets the step of dub-step.
+   * 
+   * @property {function} next - Action - Increments the step by the stepInterval.
+   * @property {function} previous - Action - Decrements the step by the stepInterval.
    * @property {function} play - Action - Starts the dub-step incrementor interval.
@@ -368,3 +370,4 @@ * @property {function} pause - Action - Pauses dub-step.
     return {
-      index: this.getControlledProp('index'),
+      // State
+      step: this.getControlledProp('step'),
       paused: this.getControlledProp('paused'),
@@ -379,8 +382,16 @@ animating: this.state.animating,
       swipeDirectionSign: this.state.swipeDirectionSign,
+      // Component/Prop getters
+      Next: this.Next,
       getNextControlProps: this.getNextControlProps,
+      Previous: this.Previous,
       getPreviousControlProps: this.getPreviousControlProps,
+      Pause: this.Pause,
       getPauseControlProps: this.getPauseControlProps,
+      Play: this.Play,
       getPlayControlProps: this.getPlayControlProps,
-      getIndexControlProps: this.getIndexControlProps,
-      getSlideProps: this.getSlideProps,
+      StepIndex: this.StepIndex,
+      getStepControlProps: this.getStepControlProps,
+      Step: this.Step,
+      getStepProps: this.getStepProps,
+      // Actions
       next: this.next,
@@ -393,2 +404,103 @@ previous: this.previous,
 
+  /**
+   * This component is responsible for tracking touch/drag interactions and sets dub-steps swipe state properties respectively.
+   * 
+   * @example
+   * // In this example, GlamorousDogeImg is a glamorous.img. The only required prop here is component. The rest gets passed through for glamorous to for styling purposes (Like css transforms).
+   * // NOTE: Glamorous is only used as an example. Any kind of component can be passed to the component prop.
+   * // If no component is passed, a div will be used.
+   * <Step
+   *  component={GlamorousDogeImg}
+   *  swipeLeftDistance={swipeLeftDistance}
+   *  dragging={dragging}
+   *  src={url}
+   *  alt="doge pic"
+   * />
+   * 
+   * @param {object} props
+   * @param {ReactElement|string} [props.component=div] The element to render
+   * @return {ReactElement}
+   */
+  Step = ({ component: Comp = 'div', ...otherProps }) => (
+    <Comp {...this.getStepProps(otherProps)} />
+  );
+
+  /**
+   * This component is responsible for incrementing the step by the stepInterval value.
+   * 
+   * @example
+   * <Next>Next</Next>
+   * 
+   * @param {object} props
+   * @param {ReactElement|string} [props.component=button] The element to render
+   * @return {ReactElement}
+   */
+  Next = ({ component: Comp = 'button', ...otherProps }) => (
+    <Comp {...this.getNextControlProps(otherProps)} />
+  );
+
+  /**
+   * This component is responsible for decrementing the step by the stepInterval value.
+   * 
+   * @example
+   * <Previous>Previous</Previous>
+   *
+   * @param {object} props
+   * @param {ReactElement|string} [props.component=button] The element to render
+   * @return {ReactElement}
+   */
+  Previous = ({ component: Comp = 'button', ...otherProps }) => (
+    <Comp {...this.getPreviousControlProps(otherProps)} />
+  );
+
+  /**
+   * This component is responsible for starting an internal interval that increments the step by the stepInterval value.
+   * 
+   * @example
+   * // Any dub-step component can be customized by passing a `component` prop.
+   * <Play component={MyCustomPlayButton}>Play</Play>
+   * 
+   * @param {object} props
+   * @param {ReactElement|string} [props.component=button] The element to render
+   * @return {ReactElement}
+   */
+  Play = ({ component: Comp = 'button', ...otherProps }) => (
+    <Comp {...this.getPlayControlProps(otherProps)} />
+  );
+
+  /**
+   * This component is responsible for clearing an internal interval that increments the step by the stepInterval value.
+   * 
+   * @example
+   * <Pause>Stop</Pause>
+   * 
+   * @param {object} props
+   * @param {ReactElement|string} [props.component=button] The element to render
+   * @return {ReactElement}
+   */
+  Pause = ({ component: Comp = 'button', ...otherProps }) => (
+    <Comp {...this.getPauseControlProps(otherProps)} />
+  );
+
+  /**
+   * This component is responsible for setting the current step of dub-step.
+   * 
+   * @example
+   * // Remember, any other prop added gets passed through to the component.
+   * <StepIndex
+   *   step={index}
+   *   onMouseEnter={() => console.log(`About to switch to step ${index}`)}
+   * >
+   *   {stepNumber}
+   * </StepIndex>
+   *
+   * @param {object} props
+   * @param {number} step The step to which dub-step should change.
+   * @param {ReactElement|string} [props.component=button] The element to render
+   * @return {ReactElement}
+   */
+  StepIndex = ({ component: Comp = 'button', step, ...otherProps }) => (
+    <Comp {...this.getStepControlProps({ step, ...otherProps })} />
+  );
+
   isPropControlled(prop) {
@@ -409,10 +521,10 @@ return this.props[prop] !== undefined;
   next = () => {
-    const nextIndex = this.getNextIndex();
-    this.props.onNext(nextIndex, this.getStateAndHelpers());
-    return this.changeSlide(nextIndex);
+    const nextStep = this.getNextStep();
+    this.props.onNext(nextStep, this.getStateAndHelpers());
+    return this.changeSlide(nextStep);
   };
   previous = () => {
-    const previousIndex = this.getPreviousIndex();
-    this.props.onPrevious(previousIndex, this.getStateAndHelpers());
-    this.changeSlide(previousIndex);
+    const previousStep = this.getPreviousStep();
+    this.props.onPrevious(previousStep, this.getStateAndHelpers());
+    this.changeSlide(previousStep);
   };
@@ -591,5 +703,5 @@ pause = () => {
   };
-  changeSlide = index => {
+  changeSlide = step => {
     if (this.props.onBeforeChange) {
-      this.props.onBeforeChange(index, this.getStateAndHelpers());
+      this.props.onBeforeChange(step, this.getStateAndHelpers());
     }
@@ -599,3 +711,3 @@
       animating: false,
-      index,
+      step,
       swipeLeftDistance: 0,
@@ -606,5 +718,5 @@ swipeDownDistance: 0,
     const callback = () => {
-      this.setIndexState(nextStateChanges, () => {
+      this.setStepState(nextStateChanges, () => {
         if (this.props.onAfterChange) {
-          this.props.onAfterChange(index, this.getStateAndHelpers());
+          this.props.onAfterChange(step, this.getStateAndHelpers());
         }
@@ -611,0 +723,0 @@ delete this.animationEndCallback;

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

890380

increased by1.9%

Number of package files

17

increased by13.33%

Lines of code

16551

increased by1.83%

Number of lines in readme file

179

increased by1.13%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

27

increased by8%

No dependency changes