├── .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 | [](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"