@vivliostyle/react

React Vivliostyle

Use React component as a Vivliostyle renderer.

Install

yarn add @vivliostyle/react

Use

import React from "react";

import { Renderer } from "@vivliostyle/react";

function App() {
  const [page, setPage] = React.useState(1);

  function next() {
    setPage((page) => page + 1);
  }

  function prev() {
    setPage((page) => page - 1);
  }

  function onLoad(state) {
    console.log(state.epageCount, state.docTitle);
  }

  const sample =
    "https://vivliostyle.github.io/vivliostyle_doc/samples/gon/index.html";

  return (
    <div>
      <Renderer source={sample} page={page} onLoad={onLoad} />
      <button onClick={next}>Next</button>
      <button onClick={prev}>Prev</button>
    </div>
  );
}

Run yarn storybook to see the Storybook.

Changelog

2.11.3 (2021-10-31)

Bug Fixes

• Error: E_FONT_FAMILY_INCONSISTENT (9d7be19), closes #797
• Page/column last line not justified when justify is specified on root (e2c9706), closes #803
• Root element styles not inherited to page context in multi-column layout (83f8ee7), closes #800
• Ruby broken when page float exists (376db9a), closes #804
• Ruby with rp elements broken at page break (11ad5cf), closes #808
• Text overflow at column/page break (824d5b6), closes #811
• Text overflow at column/page break when wbr tag is used (57e358a), closes #802
• TypeError: Cannot read properties of null (reading 'readingProgression') (b5d4acd), closes #796