⏲ Time invest: 5 Minutes ––– 👩🎓 Level: Beginner
Building scroll aware fullscreen views can be a complex process but Stickyroll is made for this exact purpose. In about 5 minutes we will have a simple app that allows endless possibilities.
We will …
create-react-app
>=8
(Install)This project requires node.js, so please make sure it is installed on your machine. You can find the downloads here.
This guide expects Node.js >=8.
To get started with Stickyroll you need a simple react project. In this guide we will use create-react-app to make easier.
The next section is quoted from the github readme of create-react-app. (Wed Dec 05 2018 23:51:26 GMT+0100 (Central European Standard Time))
To create a new app, run a single command:
npx create-react-app my-app
*(npx comes with npm 5.2+ and higher.)
It will create a directory called my-app
inside the current folder.
[...]
Once the installation is done, you can open your project folder:
cd my-app
Follow these 3 simple steps to build your first Stickyroll.
While in your app folder my-app
, run a single command:
npm install --save @stickyroll/stickyroll
Open the file my-app/src/App.css
in your text editor and replace
the entire content with this code.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
Open the file my-app/src/App.js
in your text editor and replace
the entire content with this code.
import React from 'react';
import {Stickyroll} from '@stickyroll/stickyroll';
const headlines = [
"Hello World!",
"Hello React!",
"Hello Stickyroll!",
"Let's continue with the next lesson!"
]
const App = () => {
return (
<Stickyroll pages={headlines}>
{({page, pageIndex, pages, progress}) => {
return (
<div>
<strong>{page}</strong> of <strong>{pages}</strong>
<br/>
Progress: <strong>{progress}</strong>
<h1>{headlines[pageIndex]}</h1>
</div>
);
}}
</Stickyroll>
)
};
export default App;
To start the app run a single command:
npm start
The browser should open the app. If for some reason your browser des not automatically show the app, simply navigate to http://localhost:3000/ and you're good to go.
@stickyroll/stickyroll
provides the main component and a {Listener}
to build context aware plugins.
But that is a topic for later.
Stickyroll stays in the visible area of the viewport while you scroll the page.
You can now add more logic to your Stickyroll.
Enjoy!
Stickyroll allows a lot more than just writing numbers on the screen. If you are familiar with React.js or are comfortable with your demo app and want to add custom behaviour you can take a look at the next steps in this guide.
If anything is missing or seems unclear feel free to open an issue in our github repo.
Thank you