<!DOCTYPE html>
<!-- sheetjs (C) 2013-present  SheetJS https://sheetjs.com -->
<!-- vim: set ts=2: -->
<html lang="en" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex">
<title>SheetJS x React17 Fetch Demo</title>
</head>
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<div id="root"></div>

<script type="text/babel">
function Titel(props) { return ( <h3>{props.name}</h3> ); }

function Tabeller(props) {
  /* the workbook object is the state */
  const [workbook, setWorkbook] = React.useState(XLSX.utils.book_new());

  React.useEffect(() => { (async() => {
    /* fetch and parse workbook -- see the fetch example for details */
    const wb = XLSX.read(await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer());
    setWorkbook(wb);
  })(); });

  return workbook.SheetNames.map((name, idx) => ( <div key={idx}>
    <Titel name={name} />
    <div dangerouslySetInnerHTML={{
      /* this __html mantra is needed to set the inner HTML */
      __html: XLSX.utils.sheet_to_html(workbook.Sheets[name])
    }} />
  </div>));
}

ReactDOM.render( <Tabeller/> , root );
</script>
</body>
</html>