React Flipbook

A React component that allows you to display a flipbook style animation.

Installation

npm install react-flipbook

Usage

import React from 'react';
import { Flipbook } from 'react-flipbook';

export default function App() {
    const pageSize = {
        width: 600,
        height: 750,
    };

    const pages = Array.from({ length: 10 }, (_, i) => <div>{i + 1}</div>);

    return <Flipbook pageSize={pageSize} pages={pages} />;
}

Important: You can use any component as a page, not just a div.

Props

Name	Description	Type
pageSize	The size of the pages. It should have a width and a height property.	{width: number; height: number}
pages	The pages to be displayed. Note that the order matters.	React.ReactNode[]

License

MIT License