From a36faab01ca9c17b49696a442b8d48335982d4a8 Mon Sep 17 00:00:00 2001
From: Piotr Garlej <garlej.p@gmail.com>
Date: Tue, 11 Apr 2023 07:39:29 +0200
Subject: [PATCH] fix import react error in some cases

---
 src/viewer.tsx | 22 +++++++++++-----------
 tsconfig.json  |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/viewer.tsx b/src/viewer.tsx
index a431ac4..101fbb2 100644
--- a/src/viewer.tsx
+++ b/src/viewer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
 
 import type { DiffResult } from './differ';
 import calculatePlaceholderHeight from './utils/calculate-placeholder-height';
@@ -97,7 +97,7 @@ export interface ViewerProps {
   /** Extra class names */
   className?: string;
   /** Extra styles */
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 const DEFAULT_INDENT = 2;
@@ -127,13 +127,13 @@ const Viewer: React.FC<ViewerProps> = props => {
   // Use these refs to keep the diff data and segments sync,
   // or it may cause runtime error because of their mismatch.
   // Do not use the states to render, use the refs to render and use `updateViewer` to update.
-  const linesLeftRef = React.useRef(linesLeft);
-  const linesRightRef = React.useRef(linesRight);
-  const segmentsRef = React.useRef(getSegments(linesLeft, linesRight, hideUnchangedLines));
-  const accTopRef = React.useRef<number[]>([]);
-  const totalHeightRef = React.useRef(0);
-  const tbodyRef = React.useRef<HTMLTableSectionElement>(null);
-  const [, forceUpdate] = React.useState({});
+  const linesLeftRef = useRef(linesLeft);
+  const linesRightRef = useRef(linesRight);
+  const segmentsRef = useRef(getSegments(linesLeft, linesRight, hideUnchangedLines));
+  const accTopRef = useRef<number[]>([]);
+  const totalHeightRef = useRef(0);
+  const tbodyRef = useRef<HTMLTableSectionElement>(null);
+  const [, forceUpdate] = useState({});
 
   const updateViewer = () => {
     accTopRef.current = [];
@@ -158,14 +158,14 @@ const Viewer: React.FC<ViewerProps> = props => {
     forceUpdate({});
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     linesLeftRef.current = linesLeft;
     linesRightRef.current = linesRight;
     segmentsRef.current = getSegments(linesLeft, linesRight, hideUnchangedLines);
     updateViewer();
   }, [hideUnchangedLines, linesLeft, linesRight]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!props.virtual || !scrollContainer) {
       return;
     }
diff --git a/tsconfig.json b/tsconfig.json
index 504cc95..5e51d40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "outDir": "typings",
     "resolveJsonModule": true,