Simply Paging

A vertical focused ReactJS carousel.

A work-in-progress ReactJS module.

Built by: Mario Lo

Install

yarn add simply-paging

Demo

Example

import React from 'react';
import { SimplyPaging } from 'simply-paging';

const app = ({
    pages
}) => (
    <SimplyPaging>
    {
        pages.map((page) => {
            <div className='page'>
                <h1>{page.name}</h1>
            </div>
        })
    }
    </SimplyPaging>
);

export default app;

This will wrap your .page inside a content box of 100vh. Paging controls will be automatically added.

Styles

At the moment, styles can be add one of two ways:

• Import the SCSS file

@import '/node_modules/simply-paging/dist/scss/master.scss';

• Import the LESS file

@import '/node_modules/simply-paging/dist/less/master.less';

• Copy the CSS directly from the following file

/node_modules/simply-paging/dist/css/master.min.css

Functions

N/A

Parameters

Parameter Name	Type	Required	Default Value	Description
children	node	true	null	Children nodes to display per page
WIP vertical	boolean	false	true	Paging up and down is on by default

children

type: node

Each children node inside <SimplyPaging/> component will be in its own page.

vertical

type: boolean

WIP - currently only pages up and down

Future Features

• Better way to import styles
• Support left/right paging
• Handle paging control on refresh (styling, location, resume paging, ...etc)

Feature Request

Please message hello@websitesbymario.com for feature requests.

Bug Report

Please message hello@websitesbymario.com to report bugs.

Bug List