react-just-a-book

JUST'A'BOOK

Key features:

• React Webpage stylized to look and function like a book.
• Pages are actual 3D objects, turning and displaying content on both of their sides.
• Pages (and pagination) are created programmaticaly by the application by suppling pages' content into an array.

Usage

I. START

Simply import and include JustABook component in your application. You can customize your book by passing in props specified in section below.

If you're using the book as a main body of your website, I recommend applying the following styles to the container holding 'JustABook' element (or the ".body" element):

     {
        height: 100dvh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
     }

II. FUNCTIONALITY

a. content - An array. Place the content of your pages here in the following format:

     [
        [Page1FrontComponent, Page1BackComponent], 
        [Page2FrontComponent, Page2BackComponent],
        [Page3FrontComponent, Page3BackComponent],
        [PageXFrontComponent, PageXBackComponent]
     ]

Element at position [0] of the array will become the front side of the page. Element at position [1] of the array will render on the back of the page. I recommend placing content as react components.

disableScrollandModal

If "true", Flipping pages using mouse wheel scroll, as well as modal component, will be disabled. Usefull if you want to embed the book as a component of another website. False by default.

windowScroll

If "true", Mousewheel scrolling event will be attached to the entire window, firing irregardles of the cursor position. If "false", Mouse scrolling event will be attached to the book element, firing only when pointer hovers it. False by default.

disablePortrait

If "true", the book will disappear once devices' screen orientation changes to portrait. Message prompting user to rotate their screens will pop up instead. I recommed keeping this option. True by default.

rotateMessage

Content to be displayed once screen orientation changes to portrait. If no content is passed, default message will be displayed, with default styling.

III. STYLING

Following styles will be applied to the components as inline styles, and should be written as such.

coverOuterStyle

This changes the style of the padding arround the book, imitating it's outer cover.

coverInnerStyle

This changes the style of the two elements imitating inner side of the book's cover. Those elements are visible with first and last page of the book.

WARNING. Height and with of those elements determine the dimentions of the whole book and are displayed side by side. Divide specified width by 2 to achieve desired width of the book.

pageFrontStyle, pageBackStyle

This changes the style of the actual page sides. WARNING. Avoid using the "transform" property.

paginationStyle

This changes the style of paragraph displaying page number.

leftButton, rightButton

Custom icons (or element) to be displayed as the left or right pagination button. If unspecified, default SVG arrows will be displayed with default animations. Default arrows share take their colors with the font. Those elements will be placed inside button HTML element.

III. Context

Following variables and functions are provided as context, accessible everywhere within the book:

setModalContent

useState set function. Components passed into the function will be displayed in a modal.

setShowModal

useState set function. Pass in the boolean "true" variable to hide the book and display the modal. Passing in "false" boolean will do the opposite. Use this to display/hide modal.