├── package.json
├── public
└── index.html
└── src
├── index.js
└── styles.css
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-turnjs-flip-magazine",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "jquery": "1.12.0",
9 | "react": "16.6.3",
10 | "react-dom": "16.6.3",
11 | "react-scripts": "2.0.3",
12 | "turn.js": "https://github.com/rizalibnu/turn.js.git"
13 | },
14 | "devDependencies": {},
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test --env=jsdom",
19 | "eject": "react-scripts eject"
20 | },
21 | "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
22 | }
23 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import $ from "jquery";
4 | import "turn.js";
5 |
6 | import "./styles.css";
7 |
8 | class Turn extends React.Component {
9 | static defaultProps = {
10 | style: {},
11 | className: "",
12 | options: {}
13 | };
14 |
15 | componentDidMount() {
16 | if (this.el) {
17 | $(this.el).turn(Object.assign({}, this.props.options));
18 | }
19 | document.addEventListener("keydown", this.handleKeyDown, false);
20 | }
21 |
22 | componentWillUnmount() {
23 | if (this.el) {
24 | $(this.el)
25 | .turn("destroy")
26 | .remove();
27 | }
28 | document.removeEventListener("keydown", this.handleKeyDown, false);
29 | }
30 |
31 | handleKeyDown = event => {
32 | if (event.keyCode === 37) {
33 | $(this.el).turn("previous");
34 | }
35 | if (event.keyCode === 39) {
36 | $(this.el).turn("next");
37 | }
38 | };
39 |
40 | render() {
41 | return (
42 | (this.el = el)}
46 | >
47 | {this.props.children}
48 |
49 | );
50 | }
51 | }
52 |
53 | const options = {
54 | width: 800,
55 | height: 600,
56 | autoCenter: true,
57 | display: "double",
58 | acceleration: true,
59 | elevation: 50,
60 | gradients: !$.isTouch,
61 | when: {
62 | turned: function(e, page) {
63 | console.log("Current view: ", $(this).turn("view"));
64 | }
65 | }
66 | };
67 |
68 | const pages = [
69 | "https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg",
70 | "https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg",
71 | "https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg",
72 | "https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg",
73 | "https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg",
74 | "https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg"
75 | ];
76 |
77 | const App = () => {
78 | return (
79 |
80 | {pages.map((page, index) => (
81 |
82 |
83 |