Remove getPageProps, memoize customTextRenderer and onPageClick

wojtekmaj · Jun 7, 2023 · d4174b6 · d4174b6
1 parent e7f5b4a
commit d4174b6
Showing 1 changed file with 27 additions and 23 deletions.
diff --git a/test/Test.tsx b/test/Test.tsx
@@ -114,12 +114,23 @@ export default function Test() {
     [],
   );
 
+  const onPageClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>, page: PDFPageProxy | false | undefined) =>
+      console.log('Clicked a page', { event, page }),
+    [],
+  );
+
   const onItemClick = useCallback((args: { pageNumber: number }) => {
     console.log('Clicked an item', args);
     const { pageNumber: nextPageNumber } = args;
     setPageNumber(nextPageNumber);
   }, []);
 
+  const customTextRenderer = useCallback(
+    ({ str }: { str: string }) => str.replace(/ipsum/g, (value) => `<mark>${value}</mark>`),
+    [],
+  );
+
   useEffect(() => {
     (async () => {
       const nextFileForProps = await (async () => {
@@ -197,36 +208,29 @@ export default function Test() {
 
   const nextPage = useCallback(() => changePage(1), [changePage]);
 
-  function getPageProps() {
-    return {
-      canvasBackground,
-      className: 'custom-classname-page',
-      devicePixelRatio,
-      height: pageHeight,
-      onClick: (event: React.MouseEvent<HTMLDivElement>, page: PDFPageProxy | false | undefined) =>
-        console.log('Clicked a page', { event, page }),
-      onRenderSuccess: onPageRenderSuccess,
-      renderAnnotationLayer,
-      renderForms,
-      renderMode,
-      renderTextLayer,
-      scale: pageScale,
-      width: pageWidth,
-      customTextRenderer: useCustomTextRenderer
-        ? ({ str }: { str: string }) => str.replace(/ipsum/g, (value) => `<mark>${value}</mark>`)
-        : undefined,
-    };
-  }
-
-  const pageProps = getPageProps();
-
   const documentProps = {
     externalLinkTarget,
     file: fileForProps,
     options,
     rotate,
   };
 
+  const pageProps = {
+    canvasBackground,
+    className: 'custom-classname-page',
+    customTextRenderer: useCustomTextRenderer ? customTextRenderer : undefined,
+    devicePixelRatio,
+    height: pageHeight,
+    onClick: onPageClick,
+    onRenderSuccess: onPageRenderSuccess,
+    renderAnnotationLayer,
+    renderForms,
+    renderMode,
+    renderTextLayer,
+    scale: pageScale,
+    width: pageWidth,
+  };
+
   return (
     <div className="Test">
       <header>