From 64c439bb71a16a2575ba8fc9d247de8e6973816f Mon Sep 17 00:00:00 2001 From: matheusps Date: Mon, 8 Apr 2019 12:05:11 -0300 Subject: [PATCH 1/3] Added travis and coveralls --- .travis.yml | 14 ++++++++++++++ react/package.json | 6 +++++- react/yarn.lock | 37 ++++++++++++++++++++++++++++++++++++- 3 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..7ef0c07 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,14 @@ +language: node_js +cache: + directories: + - 'node_modules' +node_js: + - '10' +before_install: + - cd react +install: + - yarn install +script: + - yarn test +after_success: + - yarn gen:coveralls diff --git a/react/package.json b/react/package.json index 5582661..f457731 100644 --- a/react/package.json +++ b/react/package.json @@ -6,8 +6,11 @@ "react" ], "scripts": { + "pretest": "yarn", "test": "vtex-test-tools test", - "test:watch": "vtex-test-tools test --watch" + "test:watch": "vtex-test-tools test --watch", + "test:coverage": "vtex-test-tools test --collectCoverage", + "gen:coveralls": "yarn test:coverage && cat ./coverage/lcov.info | coveralls" }, "dependencies": { "classnames": "^2.2.6", @@ -19,6 +22,7 @@ }, "devDependencies": { "@vtex/test-tools": "^0.2.0", + "coveralls": "^3.0.3", "eslint": "^5.15.3", "eslint-config-vtex-react": "^4.0.0", "jsdom": "^14.0.0", diff --git a/react/yarn.lock b/react/yarn.lock index b8ba089..ef5e9ad 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -1667,6 +1667,18 @@ core-util-is@1.0.2, core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= +coveralls@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.3.tgz#83b1c64aea1c6afa69beaf50b55ac1bc4d13e2b8" + integrity sha512-viNfeGlda2zJr8Gj1zqXpDMRjw9uM54p7wzZdvLRyOgnAfCe974Dq4veZkjJdxQXbmdppu6flEajFYseHYaUhg== + dependencies: + growl "~> 1.10.0" + js-yaml "^3.11.0" + lcov-parse "^0.0.10" + log-driver "^1.2.7" + minimist "^1.2.0" + request "^2.86.0" + cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -2432,6 +2444,11 @@ graphql@~0.13.2: dependencies: iterall "^1.2.1" +"growl@~> 1.10.0": + version "1.10.5" + resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e" + integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA== + growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -3321,6 +3338,14 @@ js-levenshtein@^1.1.3: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== +js-yaml@^3.11.0: + version "3.13.1" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" + integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== + dependencies: + argparse "^1.0.7" + esprima "^4.0.0" + js-yaml@^3.12.0: version "3.13.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.0.tgz#38ee7178ac0eea2c97ff6d96fff4b18c7d8cf98e" @@ -3500,6 +3525,11 @@ lcid@^2.0.0: dependencies: invert-kv "^2.0.0" +lcov-parse@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3" + integrity sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM= + left-pad@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" @@ -3556,6 +3586,11 @@ lodash@4.17.11, lodash@^4.17.11: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== +log-driver@^1.2.7: + version "1.2.7" + resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8" + integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg== + loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -4465,7 +4500,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.1" tough-cookie "^2.3.3" -request@^2.87.0, request@^2.88.0: +request@^2.86.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== From 01eb67c05d7cc043510f4c9122e2356dd7e2ba18 Mon Sep 17 00:00:00 2001 From: matheusps Date: Mon, 8 Apr 2019 12:09:34 -0300 Subject: [PATCH 2/3] Added Badges --- README.md | 119 +++++++++++++++++++++++++++++------------------------- 1 file changed, 65 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 612c231..512ff6c 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ # VTEX Slider ## Description -The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page. +The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page. :loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request ## Table of Contents + - [Usage](#usage) - [Configuration](#configuration) - [Slider](#slider) @@ -17,8 +18,8 @@ The VTEX Slider is a slider that aims a good support for SSR and can display one - [CSS namespaces](#css-namespaces) - [Tests](#tests) - ## Usage + To import it you can add to you `manifest.json` the following: ```json @@ -30,6 +31,7 @@ To import it you can add to you `manifest.json` the following: ``` And then in your component you can import the components exported from the slider: + ```javascript import { Slider, Slide } from 'vtex.slider' ``` @@ -70,7 +72,7 @@ render() { // The keys of the object represent the size of the window in px. // In this case if the window is 1300px large or bigger it will show 5 items, - // If it has 900px or any size until 1299px it will show 4 items + // If it has 900px or any size until 1299px it will show 4 items const perPage = { 1300: 5, 900: 4, @@ -95,6 +97,7 @@ render() { ``` Bellow is an example with all the components together: + ```javascript arrowRender = ({ orientation, onClick }) => { return ( @@ -169,70 +172,78 @@ render() { ### Configuration #### Slider -| Prop name | Type | isRequired | defaultValue | Description | -| --- | --- | --- | --- | -- | -| `arrowRender` | `func` | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback | -| `arrowsContainerComponent` | `func/string` | :no_entry_sign: | :no_entry_sign: | The component used to contain both arrows. Either a string to use a DOM element or a component | -| `children` | `element/array` | :heavy_check_mark: | :no_entry_sign: | The slides to render | -| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to apply to the Slider elements | -| `currentSlide` | `number` | :no_entry_sign: | `0` | Current slide on the screen, if you have perPage > 1, then the current slide is the most left slide on the screen (You should not use this variable to display the index of the slide on the screen if you're using `loop={true}`). | -| `cursor` | `string` | :no_entry_sign: | `'-webkit-grab'` | Css value of cursor when mouse is hovering the slider frame | -| `cursorOnMouseDown` | `string` | :no_entry_sign: | `'-webkit-grabbing'` | Css value of cursor when mouse is down | -| `duration` | `number` | :no_entry_sign: | `250` | Duration of transitions | -| `easing` | `string` | :no_entry_sign: | `'ease-out'` | Transition function | -| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | -| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the value of currentSlide. The function should expect a `number` as it's only parameter | -| `perPage` | `number/object` | :no_entry_sign: | `1` | Amount of slides to be on the screen, if a number is passed, then that's the number of slides that will be shown, if an object with breakpoints is passed, then the component will check the size of the screen to see how many slides will be on the screen at the same time | -| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Resize debounce timer in milliseconds | -| `rootTag` | `string` | :no_entry_sign: | `'div'` | Tag to be rendered in the root of the slider | -| `sliderFrameTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered in the slider frame element | -| `threshold` | `number` | :no_entry_sign: | `50` | Minimum of pixels to drag until the slider change the `currentSlide` | + +| Prop name | Type | isRequired | defaultValue | Description | +| -------------------------- | --------------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `arrowRender` | `func` | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback | +| `arrowsContainerComponent` | `func/string` | :no_entry_sign: | :no_entry_sign: | The component used to contain both arrows. Either a string to use a DOM element or a component | +| `children` | `element/array` | :heavy_check_mark: | :no_entry_sign: | The slides to render | +| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to apply to the Slider elements | +| `currentSlide` | `number` | :no_entry_sign: | `0` | Current slide on the screen, if you have perPage > 1, then the current slide is the most left slide on the screen (You should not use this variable to display the index of the slide on the screen if you're using `loop={true}`). | +| `cursor` | `string` | :no_entry_sign: | `'-webkit-grab'` | Css value of cursor when mouse is hovering the slider frame | +| `cursorOnMouseDown` | `string` | :no_entry_sign: | `'-webkit-grabbing'` | Css value of cursor when mouse is down | +| `duration` | `number` | :no_entry_sign: | `250` | Duration of transitions | +| `easing` | `string` | :no_entry_sign: | `'ease-out'` | Transition function | +| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | +| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the value of currentSlide. The function should expect a `number` as it's only parameter | +| `perPage` | `number/object` | :no_entry_sign: | `1` | Amount of slides to be on the screen, if a number is passed, then that's the number of slides that will be shown, if an object with breakpoints is passed, then the component will check the size of the screen to see how many slides will be on the screen at the same time | +| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Resize debounce timer in milliseconds | +| `rootTag` | `string` | :no_entry_sign: | `'div'` | Tag to be rendered in the root of the slider | +| `sliderFrameTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered in the slider frame element | +| `threshold` | `number` | :no_entry_sign: | `50` | Minimum of pixels to drag until the slider change the `currentSlide` | #### Slide -| Prop name | Type | isRequired | defaultValue | Description | -| --- | --- | --- | --- | --- | -| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Node to render | -| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to pass to the root element of the Slide | -| `defaultWidth` | `number` | :no_entry_sign: | :no_entry_sign: | Default width of the slide (only applied in the first render) | -| `tag` | `string` | :no_entry_sign: | `li` | Tag to be rendered in the root element | -| `fitImg` | `bool` | :no_entry_sign: | `true` | If the slide component should try to fit the `img` (only works if children is an `img` element) | -| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Time of debounce of resize event listener | -| `sliderTransitionDuration` | `number` | :no_entry_sign: | `250` | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value | + +| Prop name | Type | isRequired | defaultValue | Description | +| -------------------------- | -------- | ------------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Node to render | +| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to pass to the root element of the Slide | +| `defaultWidth` | `number` | :no_entry_sign: | :no_entry_sign: | Default width of the slide (only applied in the first render) | +| `tag` | `string` | :no_entry_sign: | `li` | Tag to be rendered in the root element | +| `fitImg` | `bool` | :no_entry_sign: | `true` | If the slide component should try to fit the `img` (only works if children is an `img` element) | +| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Time of debounce of resize event listener | +| `sliderTransitionDuration` | `number` | :no_entry_sign: | `250` | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value | #### SliderContainer -| Prop name | Type | isRequired | defaultValue | Description | -| --- | --- | --- | --- | --- | -| `autoplay` | `bool` | :no_entry_sign: | `false` | If the slider should be passing automatically | -| `autoplayInterval` | `number` | :no_entry_sign: | `5000` | Time in milliseconds of the interval to change the currentSlider | -| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Children of the component to render | -| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to be applied to the root element | -| `onNextSlide` | `func` | :no_entry_sign: | :no_entry_sign: | Function to be called if `autoplay={true}` | -| `pauseOnHover` | `bool` | :no_entry_sign: | `true` | If the interval should not be executed when the mouse is hovering the component | -| `tag` | `string` | :no_entry_sign: | `'div'` | Tag to render the component | + +| Prop name | Type | isRequired | defaultValue | Description | +| ------------------ | -------- | ------------------ | --------------- | ------------------------------------------------------------------------------- | +| `autoplay` | `bool` | :no_entry_sign: | `false` | If the slider should be passing automatically | +| `autoplayInterval` | `number` | :no_entry_sign: | `5000` | Time in milliseconds of the interval to change the currentSlider | +| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Children of the component to render | +| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to be applied to the root element | +| `onNextSlide` | `func` | :no_entry_sign: | :no_entry_sign: | Function to be called if `autoplay={true}` | +| `pauseOnHover` | `bool` | :no_entry_sign: | `true` | If the interval should not be executed when the mouse is hovering the component | +| `tag` | `string` | :no_entry_sign: | `'div'` | Tag to render the component | #### Dots -| Prop name | Type | isRequired | defaultValue | Description | -| --- | --- | --- | --- | --- | -| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component | -| `dotProps` | `object` | :no_entry_sign: | :no_entry_sign: | Extra props to be applied to the dot element | -| `dotSize` | `number/string` | :no_entry_sign: | :no_entry_sign: | The size of the dots, can be a number (in this case it will use px unit), or a string (you have to pass the number with the unit e.g `'3rem'`) | -| `dotTag` | `string` | :no_entry_sign: | `'li'` | Tag to be rendered in the dot element | -| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | -| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the currentSlide | -| `perPage` | `number/object` | :no_entry_sign: | `1` | This prop works the same way the `perPage` of `Slider` and this component should receive the same value of `Slider` | -| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Debounce time in milliseconds | -| `rootTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered as the root element of the component | -| `totalSlides` | `number` | :heavy_check_mark: | :no_entry_sign: | Total value of sliders that will be rendered | -| `showDotsPerPage` | `bool` | :no_entry_sign: | `false` | If this frag is true, then every dot represent a page of slides (e.g. if `perPage = 2` and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide | + +| Prop name | Type | isRequired | defaultValue | Description | +| ----------------- | --------------- | ------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component | +| `dotProps` | `object` | :no_entry_sign: | :no_entry_sign: | Extra props to be applied to the dot element | +| `dotSize` | `number/string` | :no_entry_sign: | :no_entry_sign: | The size of the dots, can be a number (in this case it will use px unit), or a string (you have to pass the number with the unit e.g `'3rem'`) | +| `dotTag` | `string` | :no_entry_sign: | `'li'` | Tag to be rendered in the dot element | +| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | +| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the currentSlide | +| `perPage` | `number/object` | :no_entry_sign: | `1` | This prop works the same way the `perPage` of `Slider` and this component should receive the same value of `Slider` | +| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Debounce time in milliseconds | +| `rootTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered as the root element of the component | +| `totalSlides` | `number` | :heavy_check_mark: | :no_entry_sign: | Total value of sliders that will be rendered | +| `showDotsPerPage` | `bool` | :no_entry_sign: | `false` | If this frag is true, then every dot represent a page of slides (e.g. if `perPage = 2` and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide | ## Styles API + You can style this app by using the props `classeName` and `classes` of the components. But if you want to style every slider of your app you need to use the [CSS namespaces](#css-namespaces) to do it. ### CSS namespaces + :construction: :construction: :construction: ## Tests -:construction: :construction: :construction: + +[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/slider/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/slider?branch=master) ## Travis CI -:construction: :construction: :construction: + +[![Build Status](https://travis-ci.org/vtex-apps/slider.svg?branch=master)](https://travis-ci.org/vtex-apps/slider) From a9ff4485060bcb4b7e8ef3a1eb4bd758e4c6a4ba Mon Sep 17 00:00:00 2001 From: matheusps Date: Mon, 8 Apr 2019 13:34:33 -0300 Subject: [PATCH 3/3] Remove auto-formating issues --- README.md | 99 +++++++++++++++++++++++++++---------------------------- 1 file changed, 49 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 512ff6c..d8ebc65 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,6 @@ The VTEX Slider is a slider that aims a good support for SSR and can display one :loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request ## Table of Contents - - [Usage](#usage) - [Configuration](#configuration) - [Slider](#slider) @@ -173,64 +172,64 @@ render() { #### Slider -| Prop name | Type | isRequired | defaultValue | Description | -| -------------------------- | --------------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `arrowRender` | `func` | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback | -| `arrowsContainerComponent` | `func/string` | :no_entry_sign: | :no_entry_sign: | The component used to contain both arrows. Either a string to use a DOM element or a component | -| `children` | `element/array` | :heavy_check_mark: | :no_entry_sign: | The slides to render | -| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to apply to the Slider elements | -| `currentSlide` | `number` | :no_entry_sign: | `0` | Current slide on the screen, if you have perPage > 1, then the current slide is the most left slide on the screen (You should not use this variable to display the index of the slide on the screen if you're using `loop={true}`). | -| `cursor` | `string` | :no_entry_sign: | `'-webkit-grab'` | Css value of cursor when mouse is hovering the slider frame | -| `cursorOnMouseDown` | `string` | :no_entry_sign: | `'-webkit-grabbing'` | Css value of cursor when mouse is down | -| `duration` | `number` | :no_entry_sign: | `250` | Duration of transitions | -| `easing` | `string` | :no_entry_sign: | `'ease-out'` | Transition function | -| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | -| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the value of currentSlide. The function should expect a `number` as it's only parameter | -| `perPage` | `number/object` | :no_entry_sign: | `1` | Amount of slides to be on the screen, if a number is passed, then that's the number of slides that will be shown, if an object with breakpoints is passed, then the component will check the size of the screen to see how many slides will be on the screen at the same time | -| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Resize debounce timer in milliseconds | -| `rootTag` | `string` | :no_entry_sign: | `'div'` | Tag to be rendered in the root of the slider | -| `sliderFrameTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered in the slider frame element | -| `threshold` | `number` | :no_entry_sign: | `50` | Minimum of pixels to drag until the slider change the `currentSlide` | +| Prop name | Type | isRequired | defaultValue | Description | +| --- | --- | --- | --- | -- | +| `arrowRender` | `func` | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback | +| `arrowsContainerComponent` | `func/string` | :no_entry_sign: | :no_entry_sign: | The component used to contain both arrows. Either a string to use a DOM element or a component | +| `children` | `element/array` | :heavy_check_mark: | :no_entry_sign: | The slides to render | +| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to apply to the Slider elements | +| `currentSlide` | `number` | :no_entry_sign: | `0` | Current slide on the screen, if you have perPage > 1, then the current slide is the most left slide on the screen (You should not use this variable to display the index of the slide on the screen if you're using `loop={true}`). | +| `cursor` | `string` | :no_entry_sign: | `'-webkit-grab'` | Css value of cursor when mouse is hovering the slider frame | +| `cursorOnMouseDown` | `string` | :no_entry_sign: | `'-webkit-grabbing'` | Css value of cursor when mouse is down | +| `duration` | `number` | :no_entry_sign: | `250` | Duration of transitions | +| `easing` | `string` | :no_entry_sign: | `'ease-out'` | Transition function | +| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | +| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the value of currentSlide. The function should expect a `number` as it's only parameter | +| `perPage` | `number/object` | :no_entry_sign: | `1` | Amount of slides to be on the screen, if a number is passed, then that's the number of slides that will be shown, if an object with breakpoints is passed, then the component will check the size of the screen to see how many slides will be on the screen at the same time | +| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Resize debounce timer in milliseconds | +| `rootTag` | `string` | :no_entry_sign: | `'div'` | Tag to be rendered in the root of the slider | +| `sliderFrameTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered in the slider frame element | +| `threshold` | `number` | :no_entry_sign: | `50` | Minimum of pixels to drag until the slider change the `currentSlide` | #### Slide -| Prop name | Type | isRequired | defaultValue | Description | -| -------------------------- | -------- | ------------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Node to render | -| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to pass to the root element of the Slide | -| `defaultWidth` | `number` | :no_entry_sign: | :no_entry_sign: | Default width of the slide (only applied in the first render) | -| `tag` | `string` | :no_entry_sign: | `li` | Tag to be rendered in the root element | -| `fitImg` | `bool` | :no_entry_sign: | `true` | If the slide component should try to fit the `img` (only works if children is an `img` element) | -| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Time of debounce of resize event listener | -| `sliderTransitionDuration` | `number` | :no_entry_sign: | `250` | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value | +| Prop name | Type | isRequired | defaultValue | Description | +| --- | --- | --- | --- | --- | +| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Node to render | +| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to pass to the root element of the Slide | +| `defaultWidth` | `number` | :no_entry_sign: | :no_entry_sign: | Default width of the slide (only applied in the first render) | +| `tag` | `string` | :no_entry_sign: | `li` | Tag to be rendered in the root element | +| `fitImg` | `bool` | :no_entry_sign: | `true` | If the slide component should try to fit the `img` (only works if children is an `img` element) | +| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Time of debounce of resize event listener | +| `sliderTransitionDuration` | `number` | :no_entry_sign: | `250` | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value | #### SliderContainer -| Prop name | Type | isRequired | defaultValue | Description | -| ------------------ | -------- | ------------------ | --------------- | ------------------------------------------------------------------------------- | -| `autoplay` | `bool` | :no_entry_sign: | `false` | If the slider should be passing automatically | -| `autoplayInterval` | `number` | :no_entry_sign: | `5000` | Time in milliseconds of the interval to change the currentSlider | -| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Children of the component to render | -| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to be applied to the root element | -| `onNextSlide` | `func` | :no_entry_sign: | :no_entry_sign: | Function to be called if `autoplay={true}` | -| `pauseOnHover` | `bool` | :no_entry_sign: | `true` | If the interval should not be executed when the mouse is hovering the component | -| `tag` | `string` | :no_entry_sign: | `'div'` | Tag to render the component | +| Prop name | Type | isRequired | defaultValue | Description | +| --- | --- | --- | --- | --- | +| `autoplay` | `bool` | :no_entry_sign: | `false` | If the slider should be passing automatically | +| `autoplayInterval` | `number` | :no_entry_sign: | `5000` | Time in milliseconds of the interval to change the currentSlider | +| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Children of the component to render | +| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to be applied to the root element | +| `onNextSlide` | `func` | :no_entry_sign: | :no_entry_sign: | Function to be called if `autoplay={true}` | +| `pauseOnHover` | `bool` | :no_entry_sign: | `true` | If the interval should not be executed when the mouse is hovering the component | +| `tag` | `string` | :no_entry_sign: | `'div'` | Tag to render the component | #### Dots -| Prop name | Type | isRequired | defaultValue | Description | -| ----------------- | --------------- | ------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component | -| `dotProps` | `object` | :no_entry_sign: | :no_entry_sign: | Extra props to be applied to the dot element | -| `dotSize` | `number/string` | :no_entry_sign: | :no_entry_sign: | The size of the dots, can be a number (in this case it will use px unit), or a string (you have to pass the number with the unit e.g `'3rem'`) | -| `dotTag` | `string` | :no_entry_sign: | `'li'` | Tag to be rendered in the dot element | -| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | -| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the currentSlide | -| `perPage` | `number/object` | :no_entry_sign: | `1` | This prop works the same way the `perPage` of `Slider` and this component should receive the same value of `Slider` | -| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Debounce time in milliseconds | -| `rootTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered as the root element of the component | -| `totalSlides` | `number` | :heavy_check_mark: | :no_entry_sign: | Total value of sliders that will be rendered | -| `showDotsPerPage` | `bool` | :no_entry_sign: | `false` | If this frag is true, then every dot represent a page of slides (e.g. if `perPage = 2` and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide | +| Prop name | Type | isRequired | defaultValue | Description | +| --- | --- | --- | --- | --- | +| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component | +| `dotProps` | `object` | :no_entry_sign: | :no_entry_sign: | Extra props to be applied to the dot element | +| `dotSize` | `number/string` | :no_entry_sign: | :no_entry_sign: | The size of the dots, can be a number (in this case it will use px unit), or a string (you have to pass the number with the unit e.g `'3rem'`) | +| `dotTag` | `string` | :no_entry_sign: | `'li'` | Tag to be rendered in the dot element | +| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping | +| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the currentSlide | +| `perPage` | `number/object` | :no_entry_sign: | `1` | This prop works the same way the `perPage` of `Slider` and this component should receive the same value of `Slider` | +| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Debounce time in milliseconds | +| `rootTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered as the root element of the component | +| `totalSlides` | `number` | :heavy_check_mark: | :no_entry_sign: | Total value of sliders that will be rendered | +| `showDotsPerPage` | `bool` | :no_entry_sign: | `false` | If this frag is true, then every dot represent a page of slides (e.g. if `perPage = 2` and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide | ## Styles API