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

| Prop Name | Type | | -------------------- | ------ | | pageNav | Object | | indicatorStyle | object | | indicatorStyleActive | object |

Page Nav Object

You can customize every button in the nav page

| Name | Type | Required | Description | | --------- | ------ | -------- | --------------------------------------- | | id | number | Yes | id for the object. | | title | string | Yes | title of the nav button. | | className | string | No | the className of the page nav button. | | style | object | No | A custom style for the page nav button. |

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

| Name | Type | Required | Description | | -------------------- | ------ | -------- | -------------------------------------------------------------- | | indicatorStyle | object | Yes | the indicator default style is required to show the indicator. | | indicatorStyleActive | object | No | the style of the active indicator. |

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