React component for flipping book pages animation

https://namannehra.github.io/flipping-pages/

Supported React versions: ^16.14.0 || ^17.0.0 || ^18.0.0

npm install flipping-pages

yarn add flipping-pages

import { FlippingPages } from 'flipping-pages';
import 'flipping-pages/dist/style.css';
import { useState } from 'react';

import './App.css';

const App = () => {
    const [selected, setSelected] = useState(0);

    const back = () => {
        setSelected(selected => Math.max(selected - 1, 0));
    };

    const next = () => {
        setSelected(selected => Math.min(selected + 1, 2));
    };

    return (
        <div>
            <div className="pages">
                <FlippingPages
                    direction="bottom-to-top"
                    onSwipeEnd={setSelected}
                    selected={selected}
                >
                    <div className="page page1">Page 1</div>
                    <div className="page page2">Page 2</div>
                    <div className="page page3">Page 3</div>
                </FlippingPages>
            </div>
            <button onClick={back}>Back</button>
            <button onClick={next}>Next</button>
        </div>
    );
};

export default App;

.pages {
    height: 256px;
    width: 256px;
}

.page {
    height: 100%;
    width: 100%;
    user-select: none;
    touch-action: none;
}

.page1 {
    background-color: pink;
}

.page2 {
    background-color: yellow;
}

.page3 {
    background-color: aqua;
}

number

Time in milliseconds for one page turn. Set to 0 to disable animation.

ReactNode

Each child is rendered on a separate page.

HTMLAttributes<HTMLDivElement>

Props passed to the root element.

Ref<HTMLDivElement>

Ref for the root element.

'bottom-to-top' | 'top-to-bottom' | 'left-to-right' | 'right-to-left'

Direction of page turn.

boolean

Disables page turning by swiping.

string

Elements with this class (or their descendants) will not trigger page turn by swiping.

() => void

Called after page turning animation ends.

() => void

Called after page turning animation starts.

(selected: number) => void

Called on each tick of page turning animation. selected is the page index in decimal. Uses requestAnimationFrame.

(overSwipe: number) => number

Called when swiping back on the first page or next on the last page. overSwipe is between 0 and 1. Return value determines how page turning is throttled.

(selected: number) => void

Called after swiping ends. selected is the page index to which user swiped.

(event: PointerEvent<HTMLDivElement>) => boolean

Called before swipe starts. event is a pointerdown event. Swipe starts only if true is returned. This can be used to disable swiping for certain pointer types like mouse.

(selected: number) => void

Called on each tick of swipe turn. selected is the page index in decimal.

number

Value of CSS perspective is calculated by multiplying perspectiveMultiplier with the size of the root element. Size is height or width depending on direction. perspective can be set manually using containerProps.style.perspective.

number

Index of the current page. Decimal values are supported.

string

Pages have a shadow when they are turning. Shadow has 0 opacity when page is resting and 1 opacity when page is half turned. shadowBackground is used for CSS background of the shadow element.

Component<ShadowProps>

Component to use as page shadow.

number

The distance in pixels user must swipe to completely one page turn.

number

Minimum speed in pixels per milliseconds to turn the page after a swipe.

boolean | 'auto'

Sets CSS will-change on turning page and shadow. If 'auto' then will-change is applied during turning animation and swiping.

You can set CSS user-select to prevent text selection when swiping using a mouse.

You can set CSS touch-action to prevent page scrolling when swiping using a touch screen.

The web platform doesn't have a way to bend an element in half. To achieve this effect, this component renders each page twice. For the first render, only the first half of the page is visible. For the second render, only the last half of the page is visible. Then these halves are rotated independently to achieve the page turning effect.

If a child component has internal state then that state will not be synced between both the page renders. The same also applies to uncontrolled components.