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 ?

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...

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.

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?

Along with up / down swipe, it would be great if we can support left / right swipe.

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.

The example pages are not loading up in IE 11. will this plugin work with it?

*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.

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.

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 [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.

What is happening

It navigates through page 1 and 2, but suddenly, it moves back to page 1, not allowing you to see page 3.

Expected behavior

It should be able to flip accross all the pages, in the same way as it is showed in the examples page

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

When I use onPageChange(pageIndex) I see that pageIndex is the previous page and not the page I went to.

For example :

• move to page 0 to 1 --> got onPageChange(0)
• move to page 1 to 2 --> got onPageChange(1)
• move to page 2 to 1 --> got onPageChange(2)
• move to page 1 to 0 --> got onPageChange(1)

Is it the desired behavior ?

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

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,
  },

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 (

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

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!

Background

I had this issue with all modes of nav; restricting nav to buttons, swipe navigation, and click navigation

Issue

When the mouse exits the component container the animation starts and prematurely ends.

Effects

Animations cuts off prematurely but the page still changes.
vid of issue

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.

Acceptance Criteria

• Do not specify the width/height of the component as a required field.
• Make the component resizable thrown CSS styles with media breakpoints.
• Test how your component will render on different devices screen making use of Google Chrome DevTools
• Test it in your personal device as well

I'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:

https://codesandbox.io/s/r778z39z5o

The devDependency eslint was updated from 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.

Your Greenkeeper Bot 🌴

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.

https://codesandbox.io/s/5zw2wnknnl

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.

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

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.

Acceptance Criteria

• Allow the user to go to the next page with a simple touch/click, on the:
  • Horizontal oriented: right
  • Vertical oriented: bottom
• Allow the user to go to the previous page with a simple touch/click, on the:
  • Horizontal oriented: left
  • Vertical oriented: top
• It might work together with the actual swipe gesture, unless it is disabled by props.

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?

Background

I have gotoNext() and gotoPrevious() as onClick events for buttons.

Issue

When either button is pressed multiple times before the animation completes on a unique page, the page index skips in the respective direction.

Effects

• Page index skips
• When moving backwards or forward, if clicked enough to reach past the end of the index, it loops back to the beginning.
  * This occurs even when looping is disabled
• If the buttons are spamclicked the animation bugs out

Possible solution

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?

Problem

Single touch causes flip of two pages at once with flipOnTouch option enabled.

Environment

"react-flip-page": "1.5.3"

Settings:

{
      orientation: "horisontal",
      responsive: true,
      uncutPages: false,
      animationDuration: 350,
      treshold: 3,
      pageBackground: "transparent",
      flipOnTouch: true
}

Browsers:

• Chrome mobile
• Chrome desktop (with mobile device emulation)
• Firefox (Responsive Design Mode)

Code example:
https://codesandbox.io/s/1z1pkoz903

How to reproduce

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.

Additional notes

• flipOnTouch works as expected on desktop browsers.
• Swipe gesture works as expected on mobile and desktop.
• iPhone's Safari doesn't have this issue.
• I guess the issue can be related to a Google Chrome "intervention". Some time ago they forcefully converted event listeners to 'passive' which caused e.preventDefault() not working.
  Try to remove touchAction: 'none' from my sandbox to see the corresponding warning in the console. More info https://www.chromestatus.com/features/5093566007214080

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.

There have been updates to the react monorepo:

• • The dependency react was updated from 16.6.1 to 16.6.2.

• The 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.

Your Greenkeeper Bot 🌴

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

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?

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,

I have noticed that the render method of my component in the FlipPage component get rendered very often, even pages that are not displayed :

• on mouse enter/out the flip page
• on click on the page
• every move during the flip

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:

There have been updates to the react monorepo:

• • The dependency react was updated from 16.8.3 to 16.8.4.

• The 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.

Your Greenkeeper Bot 🌴

When a page is being flipped the page 3Dness is cut by the container. I've tried messing around with the css and it's possible to deactivate one of the overflows to achieve the 3D effect

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?

Would it possible to make a link clickable on a flippable page?

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

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.

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 :

• the clonedBeforeItem
• the pageItem
• the clonedAfterItem

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 ?

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);

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.

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 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.

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

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?

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 ?

Hi,

In the readme we have onEndSwiping but in the code it is in reality onStopSwiping.

Thank you

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 !