React Screen

Document

Get Started

1. Install react-screen.

# Via npm
npm install react-screen

# Via Bower
bower install react-screen

2. Import react & react-screen.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Screen, ScreenSlice } from 'react-screen';

3. Import stylesheet.

// In jsx
import styles from 'path/to/css/react-screen.css';

<!-- In HTML -->
<link rel="stylesheet" href="path/to/css/react-screen.css">

4. Render it!

ReactDOM.render((
    <Screen>
        <ScreenSlice>
            <h1>First Screen</h1>
        </ScreenSlice>
        <ScreenSlice>
            <h1>Second Screen</h1>
        </ScreenSlice>
        <ScreenSlice>
            <h1>Third Screen</h1>
        </ScreenSlice>
    </Screen>
), document.getElementById('react-screen'));

Properties

// Values show below are default.
<Screen style={} sliceHeight={ 60 } delay={ 500 } showSkip={ true }>

// Descriptions
{
    style: "A React style object. It will apply to every screen."
    sliceHeight: "Unit: vh. Implies each screen's scroll height.",
    delay: 
    	"Unit: ms. When scroll to a new screen, it will disables scroll for a while. 
    	Useful for playing animation.",
    showSkip: "Boolean. Determines whether show a skip button on screen."
}

Styling

You can easily overwrite styles, just use inspect tool to check class names.

Animation

react-screen will add class "in" to the screen just entered in, and class "out" to other screens. So you can write your own animation like this:

.react-screen.in .your-element-class {
    /* In animation */
}

.react-screen.out .your-element-class {
    /* Out animation */
}

Issues and Contributing

If you find any bugs or have any advices, please leave an issue. Feel free to make a pull request and wait for accpetance!