https://github.com/ndyag/react-onepage

An implementation of fullpage slider.
https://github.com/ndyag/react-onepage

fullpage react react-component scroller

Last synced: 24 days 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:56:37.000Z (almost 2 years ago)
• Last Synced: 2023-03-22T13:49:03.445Z (over 1 year ago)
• Topics: fullpage, react, react-component, scroller
• Language: JavaScript
• Homepage: https://rawgit.com/ndyag/react-onepage/master/demo/index.html
• Size: 787 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 6
• 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.