https://github.com/ndyag/react-onepage
An implementation of fullpage slider.
https://github.com/ndyag/react-onepage
fullpage react react-component scroller
Last synced: about 1 year ago
JSON representation
An implementation of fullpage slider.
- Host: GitHub
- URL: https://github.com/ndyag/react-onepage
- Owner: NdYAG
- Created: 2017-07-28T10:47:16.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-06T09:23:46.000Z (almost 2 years ago)
- Last Synced: 2025-03-24T10:05:52.195Z (about 1 year ago)
- Topics: fullpage, react, react-component, scroller
- Language: JavaScript
- Homepage: https://rawgit.com/ndyag/react-onepage/master/demo/index.html
- Size: 833 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React OnePage Slider
A fullpage slider for mobile based on rxjs.
## Install
```shell
npm install react-onepage
```
## API
* pageIndex: number
```js
import React, { Component } from 'react'
import Slider from 'react-onepage'
class App extends Component {
render() {
return (
{pageIndex => {pageIndex}}
)
}
}
```
## Questions
**1. I have elements with `position: fixed` inside each page**
Onepage use `transform: translate` for animation, which doesn't coordinate well with `position: fixed`. You could keep those elements as siblings of ``.
**2. I have elements with `overflow: scroll` inside each page**
Nested scroller might not be common case, but feel free to add an issue if you need it. Related implementation is under consideration.
**3. Performance**
There is no need to render all pages every time. For forward & backward page navigation, only three pages are required. Empty other pages when they are not visible based on pageIndex in the children function.