react-full-page-scroller v0.1.6

react-full-page-scroller

A react module for full page scroll

Install

npm install --save react-full-page-scroller

Demo

Usage

import React, { Component } from 'react'

import MyComponent from 'react-full-page-scroller'
import 'react-full-page-scroller/dist/index.css'

class Example extends Component {
  render() {
    return (
      <MyComponent>
        <div>
          <h1>1</h1>
        </div>
        <div>
          <h1>2</h1>
        </div>
        <div>
          <h1>3</h1>
        </div>
      </MyComponent>
    )
  }
}

Props

Page Nav Object

You can customize every button in the nav page

Exemple

import React, { Component } from 'react'

import MyComponent from 'react-full-page-scroller'
import 'react-full-page-scroller/dist/index.css'

const PageNavExample  {

    const navExample={[{
                      id: 1,
                      title: 'title 1',
                      className: 'page-nav-button',
                      style: { width: '1rem' }
                    },
                    {
                      id: 2,
                      title: 'title 2',
                      className: 'page-nav-button',
                      style: { width: '1rem' }
                    },
                    {
                      id: 3,
                      title: 'title 3',
                      className: 'page-nav-button',
                      style: { width: '1rem' }
                    }
                  ]};

    return (
      <MyComponent pageNav={navExample}>
        <div>
          <h1 className='page-number'>1</h1>
        </div>
        <div>
          <h1 className='page-number'>2</h1>
        </div>
        <div>
          <h1 className='page-number'>3</h1>
        </div>
      </MyComponent>
    )
}

Indicator Style

You can add an indicator by adding the two props indicatorStyle and indicatorStyleActive

Exemple

import React, { Component } from 'react'

import MyComponent from 'react-full-page-scroller'
import 'react-full-page-scroller/dist/index.css'

const PageNavExample  {

 const  indicatorStyle = {
    height: '8px',
    width: '8px',
    margin: '10px',
    borderRadius: '4px',
    backgroundColor: 'white',
    transition: 'width 500ms ease'
  }
  const indicatorStyleActive= { width: '20px' }

    return (
      <MyComponent indicatorStyle={indicatorStyle} indicatorStyleActive={indicatorStyleActive}>
        <div>
          <h1 className='page-number'>1</h1>
        </div>
        <div>
          <h1 className='page-number'>2</h1>
        </div>
        <div>
          <h1 className='page-number'>3</h1>
        </div>
      </MyComponent>
    )
}

License

© Ibrahim Haouari