Add thumbnail width option examples

Author: phuocng

README.md

@@ -6,5 +6,5 @@ This repository contains the sources of all React PDF Viewer [examples](https://
 
 These examples work with
 
-* `@react-pdf-viewer` 3.3.0
+* `@react-pdf-viewer` 3.3.1
 * `pdfjs-dist` 2.13.216

customize-the-width-of-thumbnails/CustomWidthDefaultLayoutExample.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Viewer } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+
+interface CustomWidthDefaultLayoutExampleProps {
+    fileUrl: string;
+}
+
+const CustomWidthDefaultLayoutExample: React.FC<CustomWidthDefaultLayoutExampleProps> = ({ fileUrl }) => {
+    const defaultLayoutPluginInstance = defaultLayoutPlugin({
+        thumbnailPlugin: {
+            thumbnailWidth: 150,
+        },
+    });
+
+    return <Viewer fileUrl={fileUrl} plugins={[defaultLayoutPluginInstance]} />;
+};
+
+export default CustomWidthDefaultLayoutExample;

customize-the-width-of-thumbnails/CustomWidthExample.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Viewer } from '@react-pdf-viewer/core';
+import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';
+
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import '@react-pdf-viewer/thumbnail/lib/styles/index.css';
+
+interface CustomWidthExampleProps {
+    fileUrl: string;
+}
+
+const CustomWidthExample: React.FC<CustomWidthExampleProps> = ({ fileUrl }) => {
+    const thumbnailPluginInstance = thumbnailPlugin({
+        thumbnailWidth: 150,
+    });
+    const { Thumbnails } = thumbnailPluginInstance;
+
+    return (
+        <div
+            className="rpv-core__viewer"
+            style={{
+                border: '1px solid rgba(0, 0, 0, 0.3)',
+                display: 'flex',
+                height: '100%',
+            }}
+        >
+            <div
+                style={{
+                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                    overflow: 'auto',
+                    width: '30%',
+                }}
+            >
+                <Thumbnails />
+            </div>
+            <div style={{ flex: 1 }}>
+                <Viewer fileUrl={fileUrl} plugins={[thumbnailPluginInstance]} />
+            </div>
+        </div>
+    );
+};
+
+export default CustomWidthExample;