Comments (15)
Hi @darenju !
First of all, thanks for your job it's well documented and test-covered. As a newbie I like 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 !
from react-flip-page.
Hello buddy,
Nice repo! I really appreciate it.
Firstly, as you requested in the README file, I have the intent on helping you out with unit tests. When I have the time, I'll send my first PR to help you with this.
About features. I have some in minds. I'll create some "issues" with my feature requests.
Regards,
Nikolas
from react-flip-page.
@darenju I would love to have an option where pages pivot from the very left (as opposed to the center) to simulate more of a traditional book.
from react-flip-page.
@YoonsLee Hmm, that would totally change the way the pages are split into halves. But it's possible to find a way to keep both features I guess.
from react-flip-page.
Hi, I'm trying to build some video books- each FlipPage could have some mix of possibly text, images, and video. I get the video, but flipping the page ends up with two halves which are no longer in sync.
In the screen shot above it is one video, and the page flips left to right, but you can see that the two halves are no longer at the same point in the video. In addition clicking on one half brings up controls while the other continues to play.
It would be nice to have a demo with a video, but just some ideas of where to start debugging/fixing would help.
Thanks (and great package)!
from react-flip-page.
Update on video. I'm wondering if the issue is something to do with the video continuing to play while the transitions are in action. It seems like one possibility is to pause the video on any touch, mouse event so that in a page turn it does not continue to play.
from react-flip-page.
@talkingtab There is a onPageChange
callback that gets executed when the page has been changed. I could implement a onStartSwiping
event, so that you could pause your video accordingly.
@Selbahc Thank you for reporting! However, would you mind opening a new issue for your problem? It helps the repository to be cleaner.
Same for @talkingtab, even though we almost solved your problem.
Thank you!
from react-flip-page.
@darenju That would be a great help. Just fyi, here is the component I'm trying
import React, { Component } from "react";
class R5video extends Component {
render() {
return <video src="./MVI_OUT.mp4" type="video/mp4" controls />;
}
}
export default R5video;
from react-flip-page.
[email protected]
released with onStartSwiping
and onStopSwiping
callbacks.
In your case @talkingtab, you could do something like this:
<FlipPage onStartSwiping={() => this.videoComponent.pause()} onStopSwiping={() => this.videoComponent.resume()}>
<R5video ref={(video) => { this.videoComponent = video; }} />
</FlipPage>
class R5video extends Component {
pause() {
this.video.pause();
}
resume() {
this.video.play();
}
render() {
return <video ref={(video) => { this.video = video; }} src="./MVI_OUT.mp4" type="video/mp4" controls />;
}
}
from react-flip-page.
Wow! Thats great, I've got it installed, may take me a couple of days to walk through though. Still seeing the same thing, but not sure I have it hooked up right.
from react-flip-page.
@darenju Sure, it's done !
from react-flip-page.
Hi,
Thank you for the great repo.
I think it would be nice to have more methods than goToNextPage and goToPreviousPage.
For example getCurrentPage, hasNextPage, hasPreviousPage, others ?
Update:
I just realized we already had access to these methods and the sate through the ref , excuse-me I am still new to react.
Thank you
from react-flip-page.
Hi,
Do you think it is possible to revert the direction of the book through props ?
In other words, the first page will be at the right, we go next by swipping to the left.
Thank you
from react-flip-page.
You can now use the startAt
property to set the default page. Then just set orientation
to horizontal
. Then, you can know which actual page you're on with the onPageChange
callback, plus some maths:
<FlipPage onPageChange={(newPage) => { const actualPage = MAX_PAGES - newPage; }} />
from react-flip-page.
Thant you, the startAt
property helped me a lot. I reverted my pages and started at the end :
<FlipPage startAt={2}>
<Page3/>
<Page2/>
<Page1/>
</FlipPage>
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.