Hooks!

[btzr-io]

Hooks will make the api more transparent and easy to access, there will be no need to provide a UI and devs will have free access to build controls and extensions without limitations of the current structure.

Here are some initial tasks:

• Expose the context provider of the component
• Expose methods as hooks ( useNavigateToPage, useGetZoomLevels, etc... )

[btzr-io]

Currently methods live inside context.js:
https://github.com/btzr-io/Villain/blob/master/packages/villain-react/src/context.js

[btzr-io]

react-router provides a similar api, so we should expose the main component ( Under the hood is just a wrapper for the context provider ) like this:

<Villain>{ Indside here any component can use our custom hooks }</Villain>

This is how we can expose the methods as hooks:

export function useCurrentPage() {
  // We can access directly to our context:
  return useContext(Context).currentPage;
}

Example usage:

  const currentPage = useCurrentPage();
  const navigateForward = useNavigateForward();
  ...
 <Villain>
  <div> Current page: {currentPage}</div>
  <button onClick={navigateForward}> Next page </button>
 </Villain>

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/hooks.js
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js

[btzr-io]

I'll start to do some work on this branch, please let me know if you want to help ✌️
https://github.com/btzr-io/Villain/tree/hooks

[btzr-io]

First draft of Navigation hook:

const navigation = useNavigation();
// ...
{
  // Total count of pages
  totalPages: 24,
  // Can navigate to previous page
  canBack: false,
  // Can navigate to next page
  canForward: true,
  // Current page index ( 0 = first index )
  currentPage: 0,
 // Current page number ( 1 = first page / cover )
  currentPageNumber: 1,
  // Actions:
  // Go to page from index
  go(index),
  // Go to previous page
  back(),
  // Go to next page
  forward(),
}

[btzr-io]

First draft of Pages hook:

const currentPages =  usePages()
// Returns an array of the current image / images to render
[
  { index: 3, url: 'blob:image_url_soruce', name: 'page_0004.jpeg' }
]

// Note: if `layout` mode is set to `LAYOUT_MODE.BOOK` it will also return the next page
[
  { index: 3, url: 'blob:image_url_soruce', name: 'page_0004.jpeg' },
  { index: 4, url: 'blob:image_url_soruce', name: 'page_0005.jpeg' }
]

// Basic render example:
<div>
    { pages.map((page, key) => {
          return (<img src={page.url} height={500} key={key} />)
     })}
 </div>

[btzr-io]

New react hook implemented: useEncrypted(), to handle encrypted archives: #26 (comment)

[btzr-io]

Hooks are now part of the new villain-react/sdk module