├── .eslintrc ├── .github └── workflows │ └── nodejs.yml ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── babel.config.json ├── docs ├── index.html ├── index.js └── index.js.map ├── examples ├── FullPageExample.jsx ├── FullPageExampleCustomControls.jsx ├── FullPageExampleRef.jsx └── index.jsx ├── lib ├── components │ ├── ControlProvider.js │ ├── Controls.js │ ├── FullPage.js │ └── Slide.js ├── index.js └── utils │ ├── animated-scroll-to.js │ ├── ease-in-out-cubic.js │ ├── helpers.js │ └── is-mobile.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── Controls.jsx │ ├── FullPage.jsx │ └── Slide.jsx ├── index.js └── utils │ ├── animated-scroll-to.js │ ├── ease-in-out-cubic.js │ ├── helpers.js │ └── is-mobile.js └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "plugins": ["react"], 5 | "env": { 6 | "browser": true, 7 | "node": true 8 | }, 9 | "rules": { 10 | "import/no-extraneous-dependencies": ["error", {"devDependencies": true}], 11 | "no-plusplus": 0, 12 | "no-underscore-dangle": ["error", { "allowAfterThis": true }], 13 | "react/destructuring-assignment": 0, 14 | "react/forbid-prop-types": 0, 15 | "import/prefer-default-export": 0, 16 | "react/jsx-props-no-spreading": 0 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: [push, pull_request] 7 | 8 | jobs: 9 | build: 10 | 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [10.x, 12.x] 16 | 17 | steps: 18 | - uses: actions/checkout@v2 19 | - name: Use Node.js ${{ matrix.node-version }} 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: ${{ matrix.node-version }} 23 | - run: npm ci 24 | - run: npm run build --if-present 25 | - run: npm test 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /static/ 3 | *.log 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 zwug 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-full-page 2 | Full screen scrolling with React 3 | 4 | [![npm](https://img.shields.io/npm/v/react-full-page.svg)](https://www.npmjs.com/package/react-full-page) 5 | 6 | ## [DEMO](http://zwug.github.io/react-full-page/) 7 | 8 | ```js 9 | import React from 'react'; 10 | import { FullPage, Slide } from 'react-full-page'; 11 | 12 | export default class FullPageExample extends React.Component { 13 | render() { 14 | return ( 15 | 16 | 17 |

Inner slide content

18 |
19 | 20 |

Another slide content

21 |
22 |
23 | ); 24 | } 25 | }); 26 | ``` 27 | 28 | ## Props 29 | 30 | * `initialSlide` defaults to `0` 31 | * `duration` - scroll duration [ms] defaults to `700` 32 | * `controls` defaults to `false` 33 | * `true` adds built-in controls 34 | * Pass React component if you want to use your own controls 35 | * `controlsProps` additional props for controls component 36 | * `beforeChange` callback executed before scroll 37 | * `afterChange` callback executed after scroll 38 | * `scrollMode` `full-page` or `normal` - defaults to `full-page` 39 | 40 | Both `beforeChange` and `afterChange` will receive as parameter an object like: 41 | 42 | ```js 43 | { 44 | "from": 0, // the index of the slide react-full-page is scrolling _from_ 45 | "to": 1, // the index of the slide react-full-page is scrolling _to_ 46 | } 47 | ``` 48 | 49 | ## Slider Controls 50 | 51 | Basic controls props (passed automatically) 52 | ```js 53 | getCurrentSlideIndex: PropTypes.func.isRequired, 54 | onNext: PropTypes.func.isRequired, 55 | onPrev: PropTypes.func.isRequired, 56 | scrollToSlide: PropTypes.func.isRequired, 57 | slidesCount: PropTypes.number.isRequired, 58 | ``` 59 | Default controls example 60 | ```js 61 | 62 | ... 63 | 64 | ``` 65 | 66 | Custom controls example 67 | ```js 68 | 69 | ... 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/env", 5 | { 6 | "targets": { 7 | "chrome": "31", 8 | "firefox": "38", 9 | "ie": "11", 10 | "opera": "14", 11 | "safari": "5.1" 12 | }, 13 | "corejs": { "version": 3, "proposals": true }, 14 | "useBuiltIns": "usage" 15 | } 16 | ], 17 | "@babel/react" 18 | ], 19 | "plugins": [ 20 | ["@babel/plugin-proposal-class-properties", { "loose": true }], 21 | ["@babel/plugin-proposal-private-methods", { "loose": true }], 22 | ["@babel/plugin-proposal-private-property-in-object", { "loose": true }] 23 | ] 24 | } -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Full Page -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=123)}([function(e,t,n){"use strict";e.exports=n(87)},function(e,t,n){e.exports=n(116)()},function(e,t,n){var r=n(4),o=n(14).f,i=n(12),l=n(16),a=n(35),u=n(62),c=n(93);e.exports=function(e,t){var n,s,f,d,p,h=e.target,m=e.global,v=e.stat;if(n=m?r:v?r[h]||a(h,{}):(r[h]||{}).prototype)for(s in t){if(d=t[s],f=e.noTargetGet?(p=o(n,s))&&p.value:n[s],!c(m?s:h+(v?".":"#")+s,e.forced)&&void 0!==f){if(typeof d==typeof f)continue;u(d,f)}(e.sham||f&&f.sham)&&i(d,"sham",!0),l(n,s,d,e)}}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||Function("return this")()}).call(this,n(91))},function(e,t,n){var r=n(4),o=n(36),i=n(6),l=n(37),a=n(42),u=n(68),c=o("wks"),s=r.Symbol,f=u?s:s&&s.withoutSetter||l;e.exports=function(e){return i(c,e)||(a&&i(s,e)?c[e]=s[e]:c[e]=f("Symbol."+e)),c[e]}},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t,n){var r=n(3);e.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){var r=n(7),o=n(58),i=n(10),l=n(21),a=Object.defineProperty;t.f=r?a:function(e,t,n){if(i(e),t=l(t,!0),i(n),o)try{return a(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var r=n(8);e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},function(e,t,n){var r=n(32),o=n(34);e.exports=function(e){return r(o(e))}},function(e,t,n){var r=n(7),o=n(9),i=n(15);e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var r=n(34);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(7),o=n(31),i=n(15),l=n(11),a=n(21),u=n(6),c=n(58),s=Object.getOwnPropertyDescriptor;t.f=r?s:function(e,t){if(e=l(e),t=a(t,!0),c)try{return s(e,t)}catch(e){}if(u(e,t))return i(!o.f.call(e,t),e[t])}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var r=n(4),o=n(12),i=n(6),l=n(35),a=n(60),u=n(22),c=u.get,s=u.enforce,f=String(String).split("String");(e.exports=function(e,t,n,a){var u=!!a&&!!a.unsafe,c=!!a&&!!a.enumerable,d=!!a&&!!a.noTargetGet;"function"==typeof n&&("string"!=typeof t||i(n,"name")||o(n,"name",t),s(n).source=f.join("string"==typeof t?t:"")),e!==r?(u?!d&&e[t]&&(c=!0):delete e[t],c?e[t]=n:o(e,t,n)):c?e[t]=n:l(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&c(this).source||a(this)}))},function(e,t,n){var r=n(64),o=n(4),i=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?i(r[e])||i(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},function(e,t){e.exports={}},function(e,t,n){var r=n(7),o=n(3),i=n(6),l=Object.defineProperty,a={},u=function(e){throw e};e.exports=function(e,t){if(i(a,e))return a[e];t||(t={});var n=[][e],c=!!i(t,"ACCESSORS")&&t.ACCESSORS,s=i(t,0)?t[0]:u,f=i(t,1)?t[1]:void 0;return a[e]=!!n&&!o((function(){if(c&&!r)return!0;var e={length:-1};c?l(e,1,{enumerable:!0,get:u}):e[1]=1,n.call(e,s,f)}))}},function(e,t,n){"use strict";var r=n(2),o=n(4),i=n(17),l=n(24),a=n(7),u=n(42),c=n(68),s=n(3),f=n(6),d=n(43),p=n(8),h=n(10),m=n(13),v=n(11),y=n(21),g=n(15),b=n(27),w=n(28),k=n(38),S=n(96),x=n(41),E=n(14),T=n(9),C=n(31),P=n(12),_=n(16),O=n(36),N=n(23),j=n(25),R=n(37),M=n(5),z=n(69),I=n(70),L=n(44),A=n(22),F=n(29).forEach,D=N("hidden"),U=M("toPrimitive"),V=A.set,W=A.getterFor("Symbol"),B=Object.prototype,$=o.Symbol,H=i("JSON","stringify"),Q=E.f,q=T.f,K=S.f,Y=C.f,G=O("symbols"),X=O("op-symbols"),J=O("string-to-symbol-registry"),Z=O("symbol-to-string-registry"),ee=O("wks"),te=o.QObject,ne=!te||!te.prototype||!te.prototype.findChild,re=a&&s((function(){return 7!=b(q({},"a",{get:function(){return q(this,"a",{value:7}).a}})).a}))?function(e,t,n){var r=Q(B,t);r&&delete B[t],q(e,t,n),r&&e!==B&&q(B,t,r)}:q,oe=function(e,t){var n=G[e]=b($.prototype);return V(n,{type:"Symbol",tag:e,description:t}),a||(n.description=t),n},ie=c?function(e){return"symbol"==typeof e}:function(e){return Object(e)instanceof $},le=function(e,t,n){e===B&&le(X,t,n),h(e);var r=y(t,!0);return h(n),f(G,r)?(n.enumerable?(f(e,D)&&e[D][r]&&(e[D][r]=!1),n=b(n,{enumerable:g(0,!1)})):(f(e,D)||q(e,D,g(1,{})),e[D][r]=!0),re(e,r,n)):q(e,r,n)},ae=function(e,t){h(e);var n=v(t),r=w(n).concat(fe(n));return F(r,(function(t){a&&!ue.call(n,t)||le(e,t,n[t])})),e},ue=function(e){var t=y(e,!0),n=Y.call(this,t);return!(this===B&&f(G,t)&&!f(X,t))&&(!(n||!f(this,t)||!f(G,t)||f(this,D)&&this[D][t])||n)},ce=function(e,t){var n=v(e),r=y(t,!0);if(n!==B||!f(G,r)||f(X,r)){var o=Q(n,r);return!o||!f(G,r)||f(n,D)&&n[D][r]||(o.enumerable=!0),o}},se=function(e){var t=K(v(e)),n=[];return F(t,(function(e){f(G,e)||f(j,e)||n.push(e)})),n},fe=function(e){var t=e===B,n=K(t?X:v(e)),r=[];return F(n,(function(e){!f(G,e)||t&&!f(B,e)||r.push(G[e])})),r};(u||(_(($=function(){if(this instanceof $)throw TypeError("Symbol is not a constructor");var e=arguments.length&&void 0!==arguments[0]?String(arguments[0]):void 0,t=R(e),n=function(e){this===B&&n.call(X,e),f(this,D)&&f(this[D],t)&&(this[D][t]=!1),re(this,t,g(1,e))};return a&&ne&&re(B,t,{configurable:!0,set:n}),oe(t,e)}).prototype,"toString",(function(){return W(this).tag})),_($,"withoutSetter",(function(e){return oe(R(e),e)})),C.f=ue,T.f=le,E.f=ce,k.f=S.f=se,x.f=fe,z.f=function(e){return oe(M(e),e)},a&&(q($.prototype,"description",{configurable:!0,get:function(){return W(this).description}}),l||_(B,"propertyIsEnumerable",ue,{unsafe:!0}))),r({global:!0,wrap:!0,forced:!u,sham:!u},{Symbol:$}),F(w(ee),(function(e){I(e)})),r({target:"Symbol",stat:!0,forced:!u},{for:function(e){var t=String(e);if(f(J,t))return J[t];var n=$(t);return J[t]=n,Z[n]=t,n},keyFor:function(e){if(!ie(e))throw TypeError(e+" is not a symbol");if(f(Z,e))return Z[e]},useSetter:function(){ne=!0},useSimple:function(){ne=!1}}),r({target:"Object",stat:!0,forced:!u,sham:!a},{create:function(e,t){return void 0===t?b(e):ae(b(e),t)},defineProperty:le,defineProperties:ae,getOwnPropertyDescriptor:ce}),r({target:"Object",stat:!0,forced:!u},{getOwnPropertyNames:se,getOwnPropertySymbols:fe}),r({target:"Object",stat:!0,forced:s((function(){x.f(1)}))},{getOwnPropertySymbols:function(e){return x.f(m(e))}}),H)&&r({target:"JSON",stat:!0,forced:!u||s((function(){var e=$();return"[null]"!=H([e])||"{}"!=H({a:e})||"{}"!=H(Object(e))}))},{stringify:function(e,t,n){for(var r,o=[e],i=1;arguments.length>i;)o.push(arguments[i++]);if(r=t,(p(t)||void 0!==e)&&!ie(e))return d(t)||(t=function(e,t){if("function"==typeof r&&(t=r.call(this,e,t)),!ie(t))return t}),o[1]=t,H.apply(null,o)}});$.prototype[U]||P($.prototype,U,$.prototype.valueOf),L($,"Symbol"),j[D]=!0},function(e,t,n){var r=n(8);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t,n){var r,o,i,l=n(92),a=n(4),u=n(8),c=n(12),s=n(6),f=n(23),d=n(25),p=a.WeakMap;if(l){var h=new p,m=h.get,v=h.has,y=h.set;r=function(e,t){return y.call(h,e,t),t},o=function(e){return m.call(h,e)||{}},i=function(e){return v.call(h,e)}}else{var g=f("state");d[g]=!0,r=function(e,t){return c(e,g,t),t},o=function(e){return s(e,g)?e[g]:{}},i=function(e){return s(e,g)}}e.exports={set:r,get:o,has:i,enforce:function(e){return i(e)?o(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!u(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}}},function(e,t,n){var r=n(36),o=n(37),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},function(e,t){e.exports=!1},function(e,t){e.exports={}},function(e,t,n){var r=n(39),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},function(e,t,n){var r,o=n(10),i=n(94),l=n(40),a=n(25),u=n(95),c=n(59),s=n(23),f=s("IE_PROTO"),d=function(){},p=function(e){return"