Comments (8)
Hey,
I will take a look at your issues this weekend.
Thank you for reporting.
from react-flip-page.
I have experimented something and I think it may be related to this.
It happens when I have an nested image in the page which is positioned on the middle line, the image is splitted in two :
<FlipPage>
<Page1>
</FlipPage>
Page1 :
render() {
return (
<div>
<img className="pageBackground" src={require("../../img/Page.png")} />
<Draggable>
<Bowl id="page-bowl" />
</Draggable>
</div>
)
}
I have here used the Draggable
component to make the bowl drag from react-draggable, and when I move it, the bowl disappear when it goes on the other half :
Do you have an idea how to deal with this ?
Thank you.
from react-flip-page.
As you might have found it if you read the code, we need to split the page in two halves so that they can flip separately.
I am afraid there is no simple way to deal with what you are trying to do. Apart maybe to temporarily disable swiping on the component (via disableSwipe
property) when you are dragging your bowl.
Keep in mind this is some PoC, and should be used to display content (texts, images and such). Complicated operations like those might conflict with the behaviour of react-flip-page
.
from react-flip-page.
I disabled the swipe completely and it doesn't work.
Is it possible to deal with it in css z-index ?
One of the half could be under the other one, so that we only interact with the original component and not the clone. I am not sure if it could works.
from react-flip-page.
Even with swipe disabled, there would still need a clone as the two halves are always needed.
from react-flip-page.
Maybe it could be done with render props ?
But I am not sure how ...
from react-flip-page.
Hi,
What do you think about this issue ?
I have been able to make it work by making the state on an upper level then the pages.
I have used for this redux, but it is a lot of code for some use cases...
from react-flip-page.
I’m afraid I won’t be able to give you a positive answer for this… This is a very specific use case, and the repo is somehow a showcase. It cannot cover all of the use cases.
from react-flip-page.
Related Issues (20)
- How can I hide the page shadowing? HOT 6
- Issue: Input fields and drop-downs do not work HOT 1
- Could not find declaration for Module 'react-flip-page' HOT 2
- Error when adding responsive attribute HOT 2
- Error using ref in Functional Component TypeError: flipPage.gotoNextPage is not a function HOT 2
- An in-range update of babel7 is breaking the build 🚨 HOT 11
- Update the value of startAt after the first render HOT 1
- Using gotoNextPage after flip half page correctly but the other half flips immediately without notice HOT 3
- Security vulnerability for uglifyjs-webpack-plugin/serialize-javascript HOT 9
- Using on Mobile devices gives unexpected black background HOT 2
- flipOnTouch and goto methods - uncutPages does not work, half the animation does not work HOT 3
- Background Color Split in two for Span when it sits Between Pages HOT 2
- Next JS - ReferenceError: window is not defined HOT 1
- Pages blank until after flipped HOT 10
- cannot use input element HOT 1
- Position of "middle of page" HOT 1
- Fragments HOT 4
- TypeError: Cannot set property 'FlipPage' of undefined HOT 1
- Is this supporting on react-native also ? HOT 2
- gotoPage(page) its not reflecting animation effect
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flip-page.