book-cover-3d v1.1.2

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

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.