examples/reactjs-legacy
1
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

next.js demo refresh [ci skip]

Browse Source
This commit is contained in:
SheetJS 2022-04-12 07:59:15 -04:00
parent ff70a8ff5e
commit 40f505f37b
11 changed files with 248 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Makefile
View File

@ -4,9 +4,6 @@ react: init ## Simple server for react and clones
.PHONY: next
next: init ## next.js demo
mkdir -p pages public
cat nexthdr.js sheetjs.js > pages/sheetjs.js
cp ../../shim.js public/shim.js
next
.PHONY: native

76
README.md
View File

@ -96,20 +96,84 @@ Components used in the demo:
- [`react-native-file-access`](https://npm.im/react-native-file-access)
React Native does not provide a native component for reading and writing files.
The sample script <`react-native.js`> uses `react-native-file-access` and has
The sample script `react-native.js` uses `react-native-file-access` and has
notes for integrations with `react-native-fetch-blob` and `react-native-fs`.
Note: for real app deployments, the `UIFileSharingEnabled` flag must be manually
set in the iOS project `Info.plist` file.
#### Server-Rendered React Components with Next.js
## Server-Rendered React Components with Next.js
The demo uses the same component code as the in-browser version, but the build
step adds a small header that imports the library. The import is not needed in
deployments that use script tags to include the library.
The demo reads from `public/sheetjs.xlsx`. HTML output is generated using
`XLSX.utils.sheet_to_html` and inserted with `dangerouslySetInnerHTML`:
[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)
```jsx
export default function Index({html, type}) { return (
// ...
<div dangerouslySetInnerHTML={{ __html: html }} />
// ...
); }
```
Next currently offers 3 general strategies for server-side data fetching:
#### "Server-Side Rendering" using `getServerSideProps`
`/getServerSideProps` reads the file on each request. The first worksheet is
converted to HTML:
```js
export async function getServerSideProps() {
const wb = XLSX.readFile(path);
return { props: {
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]])
}};
}
```
#### "Static Site Generation" using `getStaticProps`
`/getServerSideProps` reads the file at build time. The first worksheet is
converted to HTML:
```js
export async function getStaticProps() {
const wb = XLSX.readFile(path);
return { props: {
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]])
}};
}
```
#### "Static Site Generation with Dynamic Routes" using `getStaticPaths`
`/getStaticPaths` reads the file at build time and generates a list of sheets.
`/sheets/[id]` uses `getStaticPaths` to generate a path per sheet index:
```js
export async function getStaticPaths() {
const wb = XLSX.readFile(path);
return {
paths: wb.SheetNames.map((name, idx) => ({ params: { id: idx.toString() } })),
fallback: false
};
}
```
It also uses `getStaticProps` for the actual HTML generation:
```js
export async function getStaticProps(ctx) {
const wb = XLSX.readFile(path);
return { props: {
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[ctx.params.id]]),
}};
}
```
## Additional Notes
Some additional notes can be found in [`NOTES.md`](NOTES.md).
[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)

4
nexthdr.js
View File

@ -1,3 +1,3 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import React from 'react';
import * as XLSX from 'xlsx';
import React from 'react';

1
pages/.gitignore vendored
View File

@ -1 +0,0 @@
sheetjs.js

32
pages/getServerSideProps.js Normal file
View File

@ -0,0 +1,32 @@
import Head from 'next/head';
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({html, type}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx and generates HTML from the first sheet.
</pre>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
); }
export async function getServerSideProps() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"))
return {
props: {
type: "getStaticProps",
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]),
},
}
}

38
pages/getStaticPaths.js Normal file
View File

@ -0,0 +1,38 @@
import Head from 'next/head';
import Link from "next/link";
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({snames, type}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx. Each worksheet maps to a path:<br/><br/>
{snames.map((sname, idx) => (<>
<Link key={idx} href="/sheets/[id]" as={`/sheets/${idx}`}><a>{`Sheet index=${idx} name="${sname}"`}</a></Link>
<br/>
<br/>
</>))}
</pre>
</div>
); }
export async function getStaticProps() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"))
return {
props: {
type: "getStaticPaths",
snames: wb.SheetNames,
},
}
}

32
pages/getStaticProps.js Normal file
View File

@ -0,0 +1,32 @@
import Head from 'next/head';
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({html, type}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx and generates HTML from the first sheet.
</pre>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
); }
export async function getStaticProps() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"))
return {
props: {
type: "getStaticProps",
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]),
},
}
}

43
pages/index.js
View File

@ -1,23 +1,24 @@
import Head from 'next/head'
import SheetJSApp from './sheetjs'
const Index = () => (
import Head from 'next/head';
export default function Index() { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS React Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<div className="container-fluid">
<h1><a href="http://sheetjs.com">SheetJS React Demo</a></h1>
<br />
<a href="https://github.com/SheetJS/js-xlsx">Source Code Repo</a><br />
<a href="https://github.com/SheetJS/js-xlsx/issues">Issues? Something look weird? Click here and report an issue</a><br /><br />
</div>
<SheetJSApp />
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS Demos</h3>
All demos read from /public/sheetjs.xlsx.<br/>
<br/>
- <a href="/getStaticProps">getStaticProps</a><br/>
<br/>
- <a href="/getServerSideProps">getServerSideProps</a><br/>
<br/>
- <a href="/getStaticPaths">getStaticPaths</a><br/>
</pre>
</div>
);
export default Index;
); }

51
pages/sheets/[id].js Normal file
View File

@ -0,0 +1,51 @@
import Head from 'next/head';
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({html, type, name}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx.<br/>
<br/>
<b>{name}</b>
</pre>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
); }
let cache = [];
export async function getStaticProps(ctx) {
if(!cache || !cache.length) {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"));
cache = wb.SheetNames.map((name) => ({ name, sheet: wb.Sheets[name] }));
}
const entry = cache[ctx.params.id];
return {
props: {
type: "getStaticPaths",
name: entry.name,
id: ctx.params.id.toString(),
html: entry.sheet ? utils.sheet_to_html(entry.sheet) : "",
},
}
}
export async function getStaticPaths() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"));
cache = wb.SheetNames.map((name) => ({ name, sheet: wb.Sheets[name] }));
return {
paths: wb.SheetNames.map((name, idx) => ({ params: { id: idx.toString() } })),
fallback: false,
};
}

BIN
public/sheetjs.xlsx Normal file
View File

Binary file not shown.

2
react-native.js vendored
View File

@ -1,5 +1,5 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import * as XLSX from 'xlsx';
import React, { Component } from 'react';
import {
AppRegistry,