{"id":13402580,"url":"https://github.com/alvarotrigo/react-fullpage","last_synced_at":"2025-05-13T23:02:29.511Z","repository":{"id":37431254,"uuid":"136047433","full_name":"alvarotrigo/react-fullpage","owner":"alvarotrigo","description":"Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/","archived":false,"fork":false,"pushed_at":"2025-05-11T09:24:11.000Z","size":11318,"stargazers_count":1304,"open_issues_count":63,"forks_count":178,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-11T09:32:46.252Z","etag":null,"topics":["fullpage","fullpagejs","fullscreen","javascript","mousewheel","onepage","react","react-wrapper","reactjs","scrolling","slideshow","snap"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alvarotrigo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-04T15:42:21.000Z","updated_at":"2025-05-11T09:24:14.000Z","dependencies_parsed_at":"2024-01-16T09:09:48.088Z","dependency_job_id":"926ffbf5-eefb-41cb-8981-f47dacba570e","html_url":"https://github.com/alvarotrigo/react-fullpage","commit_stats":{"total_commits":268,"total_committers":14,"mean_commits":"19.142857142857142","dds":0.4253731343283582,"last_synced_commit":"9543c9e3cb5dbffa4ef73a4687dde803b2f77f06"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Freact-fullpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Freact-fullpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Freact-fullpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Freact-fullpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alvarotrigo","download_url":"https://codeload.github.com/alvarotrigo/react-fullpage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253546963,"owners_count":21925540,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fullpage","fullpagejs","fullscreen","javascript","mousewheel","onepage","react","react-wrapper","reactjs","scrolling","slideshow","snap"],"created_at":"2024-07-30T19:01:17.924Z","updated_at":"2025-05-13T23:02:29.484Z","avatar_url":"https://github.com/alvarotrigo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# react-fullpage\n\n![preview](https://raw.githubusercontent.com/alvarotrigo/react-fullpage/master/assets/images/react-fullpage-logo.png)\n\n\u003cp align=\"center\"\u003eOfficial React wrapper for the \u003ca target=\"_blank\" href=\"https://github.com/alvarotrigo/fullPage.js/\"\u003efullpage.js library\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@fullpage/react-fullpage\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@fullpage/react-fullpage/latest.svg\" alt=\"react-fullpage version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- [Demo online](https://alvarotrigo.com/react-fullpage/) | [CodeSandbox](https://codesandbox.io/s/m34yq5q0qx)\n- [fullpage.js Extensions](https://alvarotrigo.com/fullPage/extensions/)\n- Brought by [@imac2](https://twitter.com/imac2) thanks to [Michael Walker](https://github.com/cmswalker).\n\n\u003c!-- github_only --\u003e\n## Browsers support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eiOS Safari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png\" alt=\"Samsung\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSamsung | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --------- | --------- | --------- | --------- | --------- | --------- | --------- |\n| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions\n\u003c!-- /github_only --\u003e\n\n\n\u003c!-- github_only --\u003e\n## Table of Contents\n\n- [Installation](https://github.com/alvarotrigo/react-fullpage#installation)\n- [License](https://github.com/alvarotrigo/react-fullpage#license)\n- [Usage](https://github.com/alvarotrigo/react-fullpage#usage)\n- [Examples](https://github.com/alvarotrigo/react-fullpage#examples)\n- [State](https://github.com/alvarotrigo/react-fullpage#state)\n- [Props](https://github.com/alvarotrigo/react-fullpage#props)\n- [Methods](https://github.com/alvarotrigo/react-fullpage#methods)\n- [Callbacks](https://github.com/alvarotrigo/react-fullpage#callbacks)\n- [Contributing](https://github.com/alvarotrigo/react-fullpage#contributing)\n- [Resources](https://github.com/alvarotrigo/react-fullpage#resources)\n\u003c!-- /github_only --\u003e\n\n## Installation\n\n```sh\nnpm install @fullpage/react-fullpage\n```\n\nThis will install the wrapper as well as [fullpage.js](https://github.com/alvarotrigo/fullPage.js/)\n\n## License\n\n### Non open source license\n\nIf you want to use react-fullpage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application's source code to an open source license. [Purchase a Fullpage Commercial License](https://alvarotrigo.com/fullPage/pricing/).\n\n### Open source license\n\nIf you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use fullPage under the terms of the GPLv3.\n\n\u003c!-- note --\u003e\n**The credit comments in the JavaScript and CSS files should be kept intact** (even after combination or minification)\n\u003c!-- /note --\u003e\n\n[Read more about fullPage's license](https://alvarotrigo.com/fullPage/pricing/).\n\n## Usage\n\nThis wrapper creates a `\u003cReactFullpage /\u003e` component. It exposes a render-prop API so markup can remain the same across fullpage.js libraries. The render prop accepts 1 parameter in its callback which contains the component's react properties state, context, etc.\n\n## UMD\n\nA UMD bundle is available for those without a build step.\n\n```js\nimport ReactFullpage from '@fullpage/react-fullpage-umd'; // will return static version on server and \"live\" version on client\n```\n\n## Server Side Rendering (SSR)\n\nSSR is supported however the server-rendered html will not be styled, this is because `window` must be present in order to properly set `height` + `width` of slides. So long as you rehydrate your fullpage component in the browser environment, regular styles will be applied.\n\nWhen using SSR or a framework such as next.js, the component adjusts itself dynamically according to the presence of `window`\n\n```js\nimport ReactFullpage from '@fullpage/react-fullpage'; // will return static version on server and \"live\" version on client\n```\n\n### SSR Examples:\n\nYou can find a [Gatsby](https://github.com/alvarotrigo/react-fullpage/tree/master/examples/gatsby/) and a [Next.js](https://github.com/alvarotrigo/react-fullpage/tree/master/examples/next/) examples in the [\"examples\" folder](https://github.com/alvarotrigo/react-fullpage/tree/master/examples). But here you have others too:\n[gatsby](https://github.com/cmswalker/gatsby_react-fullPage_Invariant-Violation-130)\n[next.js](https://github.com/cmswalker/react-fullpage-next-example)\n\n## Examples\n\nIn-depth examples can be found [here](https://github.com/alvarotrigo/react-fullpage/tree/master/examples). You can start with the [React Example](https://github.com/alvarotrigo/react-fullpage/tree/master/examples/react).\n\n### Quickstart Example:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport ReactFullpage from '@fullpage/react-fullpage';\n\nconst Fullpage = () =\u003e (\n  \u003cReactFullpage\n    //fullpage options\n    licenseKey = {'YOUR_KEY_HERE'}\n    scrollingSpeed = {1000} /* Options here */\n\n    render={({ state, fullpageApi }) =\u003e {\n      return (\n        \u003cReactFullpage.Wrapper\u003e\n          \u003cdiv className=\"section\"\u003e\n            \u003cp\u003eSection 1 (welcome to fullpage.js)\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e fullpageApi.moveSectionDown()}\u003e\n              Click me to move down\n            \u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv className=\"section\"\u003e\n            \u003cp\u003eSection 2\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/ReactFullpage.Wrapper\u003e\n      );\n    }}\n  /\u003e\n);\n\nconst root = ReactDOM.createRoot(document.getElementById('react-root'));\nroot.render(\u003cFullpage /\u003e);\n```\n\n### Fullpage.js Extension Example:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport ReactFullpage from '@fullpage/react-fullpage';\n\n// NOTE: if using fullpage extensions/plugins put them here and pass it as props\nconst pluginWrapper = () =\u003e {\n  require('./statics/fullpage.scrollHorizontally.min');\n};\n\nconst Fullpage = () =\u003e (\n  \u003cReactFullpage\n    pluginWrapper = {pluginWrapper}\n\n    //fullpage options\n    licenseKey = {'YOUR_KEY_HERE'}\n    scrollingSpeed = {1000} /* Options here */\n    scrollHorizontally = {true}  /* Because we are using the extension */\n    scrollHorizontallyKey = {'YOUR KEY HERE'}\n\n    render={({ state, fullpageApi }) =\u003e {\n      return (\n        \u003cReactFullpage.Wrapper\u003e\n          \u003cdiv className=\"section\"\u003e\n            \u003cp\u003eSection 1 (welcome to fullpage.js)\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e fullpageApi.moveSectionDown()}\u003e\n              Click me to move down\n            \u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv className=\"section\"\u003e\n            \u003cp\u003eSection 2\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/ReactFullpage.Wrapper\u003e\n      );\n    }}\n  /\u003e\n);\n\nconst root = ReactDOM.createRoot(document.getElementById('react-root'));\nroot.render(\u003cFullpage /\u003e);\n```\n\n\u003c!-- note --\u003e\nNotice that when using any [fullPage.js extension](https://alvarotrigo.com/fullPage/extensions/) you'll pass the `pluginWrapper` function prop to include the file for those features before the `react-fullpage` component mounted.  \n\u003c!-- /note --\u003e\n\n## State\n\nThe wrapper maintains state in accordance to the latest version of fullpage.js [callbacks](https://alvarotrigo.com/fullPage/docs/#callbacks)\n\nThe most recent callback event that triggered a state change will be available as `state.lastEvent`\n\n\u003c!-- note --\u003e\n_NOTE: if the v2 prop is passed, state will be mapped to v2 [callbacks](https://github.com/alvarotrigo/fullPage.js/tree/v.2.9.7#callbacks)_\n\u003c!-- /note --\u003e\n\n## Props\n\nYou can use any [options](https://alvarotrigo.com/fullPage/docs/#options) supported by fullPage.js library as react props.\n\nProps object can contain standard [options](https://alvarotrigo.com/fullPage/docs/#options) as well as fullPage.js [callbacks](https://alvarotrigo.com/fullPage/docs/#callbacks).\n\n[Example](https://codesandbox.io/s/8lpo68lp28)\n\nMore on callbacks [here](https://alvarotrigo.com/fullPage/docs/#callbacks)\n\n## Methods\n\nfullPage.js contains many [methods](https://alvarotrigo.com/fullPage/docs/#methods).\nYou can use any of them. These are made available as properties on the imported `fullpage.js` library once the first render has occured.\n\n## Callbacks\n\nEach callback name passed to the component will maintain state itself and this will be reflected via the [render prop](#usage)\nCallback parameters and the latest callback fired by fullpage.js will be reflected in [state](#state).\n\n## Styles\n\nAll fullpage.js styles are loaded from the component via a `\u003cstyle/\u003e` tag created with javascript. To override fullpage.js styles you must match specificity. Example [here](https://codesandbox.io/s/z2q912835l) in the `overrides.css` file\n\n## Contributing\n\nFound an issue? Have an idea? Check out the [Contributing](https://github.com/alvarotrigo/react-fullpage/blob/master/CONTRIBUTING.md) guide and open a PR\n\n\u003c!-- github_only --\u003e\n## Resources\n\n- [Wordpress theme](https://alvarotrigo.com/fullPage/utils/wordpress.html)\n- [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (useful to define the `easingcss3` value)\n- [fullPage.js jsDelivr CDN](http://www.jsdelivr.com/#!jquery.fullpage)\n\u003c!-- /github_only --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarotrigo%2Freact-fullpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvarotrigo%2Freact-fullpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarotrigo%2Freact-fullpage/lists"}