simply-paging v0.2.4

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

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