⏲ Time invest: 5 Minutes ––– 👩🎓 Level: Intermediate
Sometimes it is hard to build additional features into existing libraries. Stickyroll provides various options to make this very easy. In about 5 minutes we will build a small PageCounter that displays the current page.
We will …
You should have finished at least the first course.
Follow these 3 simple steps to build your first Plugin.
While in your app folder my-app
, run a single command:
npm install --save @stickyroll/decorators
Create a file my-app/src/PageCounter.js
in your text editor and paste this code.
import { page } from "@stickyroll/decorators";
import React from "react";
class PageCounter extends React.Component {
render() {
return (
<React.Fragment>
<strong>{this.props.page}</strong>{" "}
of{" "}
<strong>{this.props.pages}</strong>
</React.Fragment>
);
}
}
export default page(PageCounter);
We can now use the plugin to replace our previously local implementation.
All we need to do is replace the following section
<strong>{page}</strong> of <strong>{pages}</strong>
with this new Snippet
<PageCounter/>
and import our plugin
import PageCounter from "./PageCounter";
Your App.js
should now look like this:
import React from 'react';
import {Stickyroll} from '@stickyroll/stickyroll';
import PageCounter from "./PageCounter";
const headlines = [
"Hello World!",
"Hello React!",
"Hello Stickyroll!",
"Let's continue with the next lesson!"
]
const App = () => {
return (
<Stickyroll pages={headlines}>
{({pageIndex, progress}) => {
return (
<div>
<PageCounter/>
<br/>
Progress: <strong>{progress}</strong>
<h1>{headlines[pageIndex]}</h1>
</div>
);
}}
</Stickyroll>
)
};
export default App;
Enjoy!
You can now repeat the same process with {progress} from "@stickyroll/decorators"
.
In this case we want to replace
Progress: <strong>{progress}</strong>
with this new snippet
<ProgressCounter/>
You should now be able to do this on your own.
You can now continue with this course.
If anything is missing or seems unclear feel free to open an issue in our github repo.
Thank you