32 |
Document
33 |
Get Started
34 |
1. Install react-screen.
35 |
# Via npm
36 | npm install react-screen
37 |
38 | # Via Bower
39 | bower install react-screen
40 |
2. Import react & react-screen.
41 |
import React, { Component } from 'react';
42 | import ReactDOM from 'react-dom';
43 | import { Screen, ScreenSlice } from 'react-screen';
44 |
3. Import stylesheet.
45 |
// In jsx
46 | import styles from 'path/to/css/react-screen.css';
47 |
Or
48 |
<!-- In HTML -->
49 | <link rel="stylesheet" href="path/to/css/react-screen.css">
50 |
4. Render it!
51 |
ReactDOM.render((
52 | <Screen>
53 | <ScreenSlice>
54 | <h1>First Screen</h1>
55 | </ScreenSlice>
56 | <ScreenSlice>
57 | <h1>Second Screen</h1>
58 | </ScreenSlice>
59 | <ScreenSlice>
60 | <h1>Third Screen</h1>
61 | </ScreenSlice>
62 | </Screen>
63 | ), document.getElementById('react-screen'));
64 |
Properties
65 |
// Values show below are default.
66 | <Screen style={} sliceHeight={ 60 } delay={ 500 } showSkip={ true }>
67 |
68 | // Descriptions
69 | {
70 | style: "A React style object. It will apply to every screen."
71 | sliceHeight: "Unit: vh. Implies each screen's scroll height.",
72 | delay:
73 | "Unit: ms. When scroll to a new screen, it will disables scroll for a while.
74 | Useful for playing animation.",
75 | showSkip: "Boolean. Determines whether show a skip button on screen."
76 | }
77 |
78 |
Styling
79 |
You can easily overwrite styles, just use inspect tool to check class names.
80 |
Animation
81 |
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:
82 |
.react-screen.in .your-element-class {
83 | /* In animation */
84 | }
85 |
86 | .react-screen.out .your-element-class {
87 | /* Out animation */
88 | }
89 |
90 |
Issues and Contributing
91 |
If you find any bugs or have any advices, please leave an
issue. Feel free to make a pull request and wait for accpetance!
92 |