# pagescroll

> [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ZhengHe-MD/PageScroll/master/LICENSE)

Latest version **0.0.1** (published 2016-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install pagescroll
pnpm add pagescroll
yarn add pagescroll
bun add pagescroll
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2016-07-02 |
| First published | 2016-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhenghe |
| Maintainers | zhenghe |

## Links

- npm: https://www.npmjs.com/package/pagescroll
- npm.io page: https://npm.io/package/pagescroll

## Recent versions

- 0.0.1 (latest) — 2016-07-02

## README

# PageScroll
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ZhengHe-MD/PageScroll/master/LICENSE)

this is a react component that implements the [ScrllTrigger](https://github.com/terwanerik/ScrollTrigger)

# Demo

You can see the demo in the github page of [terwanerik/ScrollTrigger](https://terwanerik.github.io/ScrollTrigger/)

# Install
```
npm install pagescroll
```

# Properties

Just give you the PageScroll's propTypes in source code
```
PageScroll.propTypes = {
  pages: PropTypes.arrayOf(PropTypes.shape({
    customized: PropTypes.bool,
    content: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.string),
      PropTypes.object,
    ]),
  }))
}
```

To make it clear:

* `customized`: bool - means whether it is a cutomized content. If it is false, the component will take the content as an array of strings, and display the string one by one with the tag from h1 -> h2 -> h3. If it is true, the component will take the content as an JSX object. Feel free to design any JSX object.

* `content`: array of strings or a JSX object - explained in `customized`

## example props

```
import React from 'react';
const data = {
  pages: [
    {
      customized: false,
      content: [
        'ScrollTrigger',
        'Add scroll based animations to your site with ease.',
      ],
    },
    {
      customized: false,
      content: [
        'CSS Animations',
        'All animations are triggered by classes, so you can take advantage of the power that CSS3 animations give you.'
      ],
    },
    {
      customized: false,
      content: [
        'Vanilla JS',
        'It\'s written in vanilla javascript, so you can use it with any framework.'
      ],
    },
    {
      customized: false,
      content: [
        'Request Animation Frame',
        'It uses the window.requestAnimationFrame method so it doesn\'t jack the users scroll. Animations are triggered when the browser is ready for it.'
      ]
    },
    {
      customized: false,
      content: [
        'Simple syntax',
        'You define the options inside the HTML attribute, so after you have initialised the ScrollTrigger you don\'t have to touch JavaScript again.'
      ],
    },
    {
      customized: true,
      content: <div>
                 <h1>Open source</h1>
                 <h2>The project, with documentation, is on <a href="https://github.com/terwanerik/ScrollTrigger">GitHub</a>. Give it some love!</h2>
                 <h3>Written by <a href="https://erikterwan.com" target="_blank">Erik Terwan</a></h3>
               </div>
    }
  ]
}
```

---
_Source: https://npm.io/package/pagescroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._