darenju / react-flip-page Goto Github PK
View Code? Open in Web Editor NEWA React.js implementation of the Flipboard page swipe.
License: MIT License
A React.js implementation of the Flipboard page swipe.
License: MIT License
A full screen video or button control gets cut into half in horizontal swipe mode. Clicking on a full screen button will trigger click on half part of button while other half remains as it is thats weird.
Hi
I am evaluating this plugin. I am basically trying to create a flip book. Where All pages will have multiple Images on them. I want to be able to have an arrow handle bar on each side. Is this possible to do?
I try using gotoPage(1)
and it's not page 1 it's the second page but when I try gotoPage(0)
I get the expected RangeError. So why is the very first page not the actual first page?
Hello, thanks for the package.
I was wondering if there was any way to trigger the effect of flipping the page with something like a button outside the component. Thanks.
Hey,
I have noticed that when an element on a page has a z-index > 0, I still see it when I turn the page.
Can you reproduce that ?
Do you have an idea how to correct it ?
Thank you very much.
When I use onPageChange(pageIndex) I see that pageIndex is the previous page and not the page I went to.
For example :
Is it the desired behavior ?
Create a project from scratch using create-react-app:
npx create-react-app reproducing-issue
cd reproducing-issue
Install you dependency from npm:
npm i -P [email protected]
And, inside src/App.js
, change the content to be:
import React, { Component } from 'react';
import FlipPage from 'react-flip-page';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<FlipPage>
<article>
<h1>My awesome first article</h1>
<p>My awesome first content</p>
</article>
<article>
<h1>My wonderful second article</h1>
<p>My wonderful second content</p>
</article>
<article>
<h1>My excellent third article</h1>
<p>My excellent third content</p>
</article>
</FlipPage>
</div>
);
}
}
export default App;
Now, run the application with:
npm start
And try to navigate until page 3.
It navigates through page 1 and 2, but suddenly, it moves back to page 1, not allowing you to see page 3.
It should be able to flip accross all the pages, in the same way as it is showed in the examples page
Hi,
we already had this discussion here and you gave me a solution, but it is not efficient in term of loading because we start loading the last page.
It happens because when I want them to be right to left, I reverse them in <FlipPage>
component and use startAt
property to begin at the end.
The result is that the first page (which is the last one in <FlipPage>
), is loaded at the end.
I will try to make a PR for this.
Hi,
In the readme we have onEndSwiping but in the code it is in reality onStopSwiping.
Thank you
hey bro,
thanks for your work
I want to add page after i get some page, those page are some html code.And it is very large. So i wanna know is there a method to add a page async
Hi,
I have noticed that the onStartSwiping event is fired on a simple click, it seems to me that it is too fast. What do you think if there was something like a threshold, the event is fired would be fired only if the users keeps his mouse down and mov a little bit ?
Hi there,
I have noticed that gotoNextPage()
and gotoPreviousPage()
trigger onPageChange
event but gotoPage(N)
does not.
Is it a feature or a bug?
Thanks,
Konstantin
Hello,
I have a use case to implement where the user would click on a link in the begining of the book wich leads him to a specific page in the page.
I have tried to increment the page in a for-loop with gotoNextPage()
, I am able to go to the wanted page but it makes every pages appear and swipe until the good page appears.
Is there a way to go to a page directly without showing every page ?
Stephane.
Along with up / down swipe, it would be great if we can support left / right swipe.
Hi,
This issue is related to this one.
I have noticed that the state of my page is not reflected on every part of it but only in the half that changes the state.
For example, in a page I have a button 'go next' on the right, this button is disabled.
I have an other button which enables the 'go next' button when the user clicks on it. If this button is in the same side of the 'go next' button, the button gets enabled correctly. But if it is in the other side, the button stays disabled.
I think this is because of the use of React method cloneElement
. Which duplicates the element props, but when the state of the first one changes, it doesn't go to the second one.
I don't how this could be fixed, do you have an idea ?
Thank you for your help
5.14.1
to 5.15.0
.๐จ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
4088c6c
Build: Remove path.resolve in webpack build (#11462) (Kevin Partington)ec59ec0
New: add rule "prefer-named-capture-group" (fixes #11381) (#11392) (Pig Fang)a44f750
Upgrade: [email protected] (#11461) (Teddy Katz)d3ce611
Sponsors: Sync README with website (ESLint Jenkins)ee88475
Chore: add utils for rule tests (#11453) (่ๅฎ่ฐ็็ซ)d4824e4
Sponsors: Sync README with website (ESLint Jenkins)6489518
Fix: no-extra-parens crash when code is "((let))" (#11444) (Teddy Katz)9d20de2
Sponsors: Sync README with website (ESLint Jenkins)3f14de4
Sponsors: Sync README with website (ESLint Jenkins)3d6c770
Sponsors: Sync README with website (ESLint Jenkins)de5cbc5
Update: remove invalid defaults from core rules (fixes #11415) (#11427) (Teddy Katz)eb0650b
Build: fix linting errors on master (#11428) (Teddy Katz)5018378
Chore: enable require-unicode-regexp on ESLint codebase (#11422) (Teddy Katz)f6ba633
Chore: lint all files in the repo at the same time (#11425) (Teddy Katz)8f3d717
Docs: Add non-attending TSC member info (#11411) (Nicholas C. Zakas)ce0777d
Docs: use more common spelling (#11417) (่ๅฎ่ฐ็็ซ)b9aabe3
Chore: run fuzzer along with unit tests (#11404) (Teddy Katz)db0c5e2
Build: switch from browserify to webpack (fixes #11366) (#11398) (Pig Fang)The new version differs by 22 commits.
b00a5e9
5.15.0
c3aebb1
Build: changelog update for 5.15.0
4088c6c
Build: Remove path.resolve in webpack build (#11462)
ec59ec0
New: add rule "prefer-named-capture-group" (fixes #11381) (#11392)
a44f750
Upgrade: [email protected] (#11461)
341140f
Revert "Chore: remove devDependency common-tags (#11455)" (#11460)
d3ce611
Sponsors: Sync README with website
aaba636
Chore: remove devDependency common-tags (#11455)
ee88475
Chore: add utils for rule tests (#11453)
d4824e4
Sponsors: Sync README with website
6489518
Fix: no-extra-parens crash when code is "((let))" (#11444)
9d20de2
Sponsors: Sync README with website
3f14de4
Sponsors: Sync README with website
3d6c770
Sponsors: Sync README with website
de5cbc5
Update: remove invalid defaults from core rules (fixes #11415) (#11427)
There are 22 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donโt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot ๐ด
Single touch causes flip of two pages at once with flipOnTouch option enabled.
"react-flip-page": "1.5.3"
Settings:
{
orientation: "horisontal",
responsive: true,
uncutPages: false,
animationDuration: 350,
treshold: 3,
pageBackground: "transparent",
flipOnTouch: true
}
Browsers:
Code example:
https://codesandbox.io/s/1z1pkoz903
Open this sandbox https://1z1pkoz903.codesandbox.io/ in one of the browsers listed above.
Touch right-hand edge of the page to turn it. You will see that it opens Page 3 instead of Page 2.
e.preventDefault()
not working.touchAction: 'none'
from my sandbox to see the corresponding warning in the console. More info https://www.chromestatus.com/features/5093566007214080I'm not really sure why, but it seems like the children of FlipPage
are rendered several times. Here's a sample that logs when each child is rendered:
The background color gets cut off on the right side of the page even when set to height 100%.
Image of issue: image
I'm got around it by using a css selector, but that has a delay in filling the component.
.storybook is a classname of FlipPage
.storybook > div > div > div > div> div {
height: 100%;
}
Is this a possible fix? In react-flip-page/generateStyles.js the object on line 82
pull: {
left: orientation === 'vertical' ? 0 : '-100%',
position: 'absolute',
right: 0,
height: 100%,
top: orientation === 'vertical' ? '-100%' : 0,
},
dependency
react was updated from 16.8.3
to 16.8.4
.dependency
react-dom was updated from 16.8.3
to 16.8.4
.๐จ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the react group definition.
react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those donโt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot ๐ด
*A video which shows the bugs is attached.
react-flip-page-bugs.zip
Description
When flipping left-to-right, before the page is changed, half of the page is hidden by the previous page for a second and only than the rest of the page appears.
Another problem is that when flipping (again on Ipad/Iphone), fixed elements with high z-index (In the video, the Home icon) are hidden by the pages until the flipping is over.
The example pages are not loading up in IE 11. will this plugin work with it?
I'm trying to make nested flipboards to make, for example, a "main navigation" vertical, but with some nested flipboards with horizontal navigation.
When I try doing it, it splits the board in 4 windows, which is not the desired effect.
Any idea in wich part of the codebase I can look to try solving that ?
Here is a simple exemple of what I'm trying to achieve :
<FlipPage orientation="vertical">
<FlipPage orientation="horizontal">
<div>Main screen</div>
<div>Horizontal swipe from the main screen</div>
</FlipPage>
<FlipPage orientation="horizontal">
<div>Second Main screen (vertical swipe from the main screen)</div>
<div>Horizontal swipe from the Second Main screen</div>
</FlipPage>
</FlipPage>
Thanks for your time !
I stucked at this issue when i used FlipPage for my react-native app run on android device. Please show me how to fix this issue
Hi,
Is it possible to disable swipe on specific elements based on there className ?
My problematic is that I have images I need to drag and drop in a FlipPage
child, when I drag it, it swipes also the page.
I think I can use disableSwipe
property when I am dragging, but I think that there could be an easier solution.
What do you think ?
Is there a way to keep track of the current page from outside the component? I mean independently from if pages changed by gesture or from with gotoPreviousPage()
or gotoNextPage()
methods.
Maybe the possibility to pass a callback that's executed on page change could do the trick?
Or maybe there's a way already that I can't see...
Hi,
I already mentionned this in the issue about the state, but I think it is a different problem so I make an other issue.
When an image is inside a page on the middle it is splitted :
<FlipPage>
<Page1>
</FlipPage>
Page1 :
render() {
return (
<div>
<img className="pageBackground" src={require("../../img/Page.png")} />
<Bowl id="page-bowl" />
</div>
)
}
I have managed to make this work by removing the bottom: 0px
on three divs :
const noBottom = {bottom: 'unset'};
<div role="presentation">
<div style={m(part, before, cut, noBottom)}>
{clonedBeforeItem}
<div style={mask} />
</div>
<div style={m(part, cut, after)}>
<div style={pull}>{clonedAfterItem}</div>
<div style={mask} />
</div>
<div style={m(part, visiblePart, firstHalf, this.state.firstHalfStyle)}>
<div style={face}>
<div style={m(cut, firstCut, noBottom)}>{pageItem}</div>
<div style={m(mask, maskReverse)} />
<div style={m(gradient, gradientFirstHalf)} />
</div>
<div style={m(face, back)}>
<div style={cut}>
<div style={pull}>{clonedBeforeItem}</div>
</div>
<div style={m(gradient, gradientFirstHalfBack)} />
</div>
</div>
<div style={m(part, visiblePart, secondHalf, this.state.secondHalfStyle)}>
<div style={face}>
<div style={cut}>
<div style={pull}>{pageItem}</div>
</div>
<div style={m(mask, maskReverse)} />
<div style={m(gradient, gradientSecondHalf)} />
</div>
<div style={m(face, back)}>
<div style={m(part, after, cut, firstCut, noBottom)}>
{clonedAfterItem}
</div>
<div style={m(gradient, gradientSecondHalfBack)} />
</div>
</div>
</div>
This alignes the image, but it causes a shadow to appear on the bottom when swipping :
What do you think about this ?
Hi,
I have noticed that the render method of my component in the FlipPage component get rendered very often, even pages that are not displayed :
I think this causes the appli to slow down, moreover it seems that the state of the sub component is not kept.
Some code :
<FlipPage>
<Page1/>
<Page2/>
<Page3/>
</FlipPage>
function Page3(props) {
console.log('render page3')
return (
<div>
<img className="pageBackground" src={require("./img/Page-03.png")} />
</div>
)
}
In this example, I have just move the mouse around the component and click on the first page, but the third page get rendered anyway :
In an other example, I have a next button which is disabled by default and enabled by the some user action.
function noop(){}
function NextButton(props) {
// We disable the click if not active
const click = props.active ? props.onClick : noop;
const className = 'animated ' + (props.active ? '' : 'inactive');
console.log('render next button')
return (
<img id="page-next" className={className} src={require('./img/page_next.png')} onClick={click} />
)
}
class Page1 extends Component {
constructor(props) {
super(props);
this.state = {}
this.handleClickBell = this.handleClickBell.bind(this)
}
handleClickBell() {
this.setState({canGoNext : true })
}
render() {
return (
<div>
<img className="pageBackground" src={require("./img/Page-01.png")} />
<NextButton key='page01' onClick={this.props.onClickNext} active={this.state.canGoNext}/>
<Bell onClick={this.handleClickBell}/>
</div>
)
}
}
There I have just move the mouse a little for a few seconds and I have hundreds of renders:
I am getting two warnings -
Warning: Failed prop type: e: prop type children
is invalid; it must be a function, usually from React.PropTypes.
in e
and
warning.js?6327:35 Warning: e: type specification of prop style
is invalid; the type checker function must return null
or an Error
but returned a function. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).
Looking at the code, I see -
FlipPage.propTypes = {
children: PropTypes.Children,
...
style: PropTypes.shape,
...
Is this intentional?
As a user of your lib, I want to be able to not specify the width, neither the height of FlipPage component, so that the component can have a dynamic size and fit any device screen.
media
breakpoints.Currently all pages are like hardcovers/very stiff paper.
turn.js got also an effect for soft, waving paper.
Is it possible to implement this, too, ideally for the pages in between as usually in the real world?
can you make the same component for react native version, please? im looking for this kind libray, but i only find this one, i'd appreciate it so much if you can implement this to react native,
thanks in advanced
Hello,
I am creating a SSR react application with express server. I tried to include flip page animation but ended up getting the following error t.defineProperty(o,"defa
ReferenceError: window is not defined
at Object. (/Users//git///node_modules/react-flip-page/dist/index.js:1:316)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object. (/Users//git///dist/server.js:238:18)
at webpack_require (/Users//git///dist/server.js:20:30)
Does this package support SSR ? if yes, is there a way to fix this issue ?
thank you in advance.
Hello,
To everyone who follows this repo or has come across itโฆย is there any feature you would like to see included in this package?
I'm running out of idea to improve this package.
Thank you!
I implemented simple demo from docs.
I can flip page by mouse, but when I bring the mouse out of the component, page flips back.
React: 15.6.2
Here is the video.
dependency
react was updated from 16.6.1
to 16.6.2
.dependency
react-dom was updated from 16.6.1
to 16.6.2
.๐จ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the react group definition.
react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those donโt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot ๐ด
I mainly want to use this component for the flipping effect and for turning pages on a traditional website.
It doesn't seem to be possible to make it running as demo on Codepen, see https://codepen.io/strarsis/pen/JzVGmW:
index.js:8 Uncaught ReferenceError: process is not defined
at index.js:8
(anonymous) @ index.js:8
index.js:1 Uncaught TypeError: Cannot read property 'PureComponent' of undefined
at index.js:1
at Module.<anonymous> (index.js:1)
at n (index.js:1)
at index.js:1
at index.js:1
at index.js:1
at index.js:1
react
, react-dom
, prop-types
and react-flip-page
have been added as external resources using unpkg
.
It's very confusing that when I print out the index of page 1 it says 0. Even though we can't use gotoPage(0)
as it throws an error, that page is indexed as 0. Going to page 1 technically goes to page 2. Can this be fixed?
I have gotoNext() and gotoPrevious() as onClick events for buttons.
When either button is pressed multiple times before the animation completes on a unique page, the page index skips in the respective direction.
If this is cause by the events being called multiple times before they can process, is there a way to disable further click events until completion of the animation after the function is called?
How to reproduce
Create a project from scratch using create-react-app:
npx create-react-app reproducing-issue
cd reproducing-issue
Install you dependency from npm:
npm i -P react-flip-page
And, inside src/App.js, change the content to be:
import React, { Component } from 'react';
import FlipPage from 'react-flip-page';
import './App.css';
class App extends Component {
render() {
return (
My awesome first content
My wonderful second content
My excellent third content
export default App;
Now, run the application with:
npm start
And try to navigate to next page slowly...and dont leave it shows previous page and when you leave then current page shows.
Stucked with it please help
As of latest version 1.3.0 attempting to use the flipOnTouch
option buttons does not work, at least with mouse clicks. I have left the rfpTouchZone property at its default value as well.
Second issue is that while swiping back and forth, these error stacks keep popping up intermittently:
Here is my package.json
for visibility as this may be a result of conflicting dependencies:
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"node-sass": "^4.8.3",
"react-hot-loader": "^4.1.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.19.1",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"font-awesome": "^4.7.0",
"react": "^16.5.2",
"react-dom": "^16.3.2",
"react-flip-page": "^1.3.0",
"react-scroll-to-component": "^1.0.2",
"scrollmonitor-react": "^2.3.2"
}
Let me know if I can provide anything else to be of further assistance. Thank you.
Would it possible to make a link clickable on a flippable page?
Flipping pages with the mouse doesn't work, it's hard to explain besides saying that you need to try it. I noticed the examples at http://darenju.me/react-flip-page/examples are also using an older build and work right. Another data point is that it still works when using the gotoPreviousPage
etc methods.
Hi,
When I switch on the version 1.2.1 or 1.2.2, I have this error on compilation :
$npm start
Failed to compile.
./src/index.js
Module build failed: Error: Cannot find module '@babel/core'
When I go back to 1.2.0 it works normally.
I have notices a difference in package-lock.json between the two versions, we have now babel as a requirement :
"react-flip-page": {
"version": "1.2.1",
"resolved": "https://...",
"integrity": "sha512-...",
"requires": {
"babel-core": "^7.0.0-bridge.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"uglifyjs-webpack-plugin": "^2.0.0"
}
}
version 1.2.0 :
"react-flip-page": {
"version": "1.2.0",
"resolved": "https://...",
"integrity": "sha512-...",
"requires": {
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"uglifyjs-webpack-plugin": "^1.2.7"
}
}
I am working on Linux Fedora 28, npm version 6.4.1, node 8.12.0.
Do you think it can be fixed ?
Thank you very much.
I had this issue with all modes of nav; restricting nav to buttons, swipe navigation, and click navigation
When the mouse exits the component container the animation starts and prematurely ends.
Animations cuts off prematurely but the page still changes.
vid of issue
I tried setting horizontal flip but it dosent seems to work
import React from "react";
import ReactDOM from "react-dom";
import FlipPage from "react-flip-page";
import "./styles.css";
const baseUrl = "http://unsplash.it/320/480/?image=";
const images = [434, 428, 413, 400];
const theEndStyle = {
alignItems: "flex-end",
backgroundColor: "#000",
color: "#fff",
display: "flex",
justifyContent: "center",
padding: 10
};
const theEnd = <div style={theEndStyle}>The End!</div>;
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<FlipPage showSwipeHint orientation="horizontal" lastComponent={theEnd}>
{images.map((n, i) => (
<img key={i} src={`${baseUrl}${n}`} />
))}
</FlipPage>
;
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Thought I would create a separate issue for this so it doesn't pollute your enhancement issue. Feel free to close this if you would rather I post there.
I've been out of commission but back to attempting to understand this problem. I was unable to find a way to get better results with the startSwipe, stopSwipe stuff. I'm wondering now if a cleaner approach is to replace the video component with a component that is an image during swiping, and a video component that is started when not swiping. I'm trying to get the swap thing to work with just images and then try with a video component once that is working.
My other question is whether I need to use a React video component instead of just a plain
I'm also wondering if the controls part of the
As a user of your lib, I want to be able to flip accross the pages using touch/click, so that I can have a similiar behavior of ereaders as Kindle, Kobo, and so on.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.