book-cover-3d

3D Book Cover

A React component to display a 3D Book Cover in a web page. This component is used in (and was created for) the application 3dbook.xyz, which offers a service to manage, embed and host your 3D book covers.

Installation

Using Yarn: yarn add book-cover-3d

Using NPM: npm i --save book-cover-3d

Usage

import { BookCover } from 'book-cover-3d'

export const MyComponent = () => {
  return (
    <BookCover>
      <div>Your cover content</div>
    </BookCover>
  )
}

Examples

Using an image as the cover

return (
  <BookCover>
    <img src="https://3dbook.xyz/demo-book.png" />
  </BookCover>
)

Using custom content

return (
  <BookCover>
    <div style={/*...*/}>
      <span style={/*...*/}>MY BOOK</span>
      <span style={/*...*/}>John Doe</span>
    </div>
  </BookCover>
)

Settings

Name	Type	Description	Default
rotate	number	Rotation of the book, in degrees	30
rotateHover	number	Rotation of the book on hover, in degrees	5
perspective	number	Perspective value seems to be a realistic value	600
transitionDuration	number	Duration of rotate animation, in milliseconds	1
radius	number	Radius of right corners, in pixels	2
thickness	number	Book thickness, in pixels	50
bgColor	string	Color of the inside of back cover	#01060f
width	number	Width of the book, in pixels	200
height	number	Height of the book, in pixels	300
pagesOffset	number	Offset between the pages and the cover size, in pixels	3

Example of using settings props:

return (
  <BookCover
    rotate={45}
    rotateHover={30}
    perspective={500}
    transitionDuration={3}
    radius={5}
    thickness={30}
    bgColor="#1e3a8a"
    width={300}
    height={200}
    pagesOffset={5}
  >
    <div />
  </BookCover>
)

HTML and CSS for given settings

If you don’t want to use the React component, you can extract the CSS generated for given 3D settings.

import { getCssForSettings } from 'book-cover-3d'

const settings = {
  rotate: 30,
  // ...
}
const css = getCssForSettings('BOOK_ID', settings)

<div class="book-container-BOOK_ID">
  <div class="book">
    <img src="https://3dbook.xyz/demo-book.png" />
  </div>
</div>

Note that you can use a unique ID for your book cover (in HTML and when calling getCssForSettings), so you can use different settings for different books.