Merge pull request #9 from krjakbrjak/VNI-external-react

Use external react

package.json

@@ -16,7 +16,7 @@
         "url": "https://github.com/krjakbrjak/virtualtable/issues"
     },
     "homepage": "https://github.com/krjakbrjak/virtualtable#readme",
-    "main": "dist/main.js",
+    "main": "dist/index.js",
     "dependencies": {
         "normalize.css": "^8.0.1",
         "prop-types": "^15.8.1",

src/VirtualTable.tsx

@@ -81,7 +81,7 @@ function reducer<Type>(state: State<Type>, action: Action<Type>): State<Type> {
  * @param {VirtualTable.Props} props Properties
  * @component
  */
-function VirtualTable<Type>({ height, renderer, fetcher }: Args<Type>) {
+export default function VirtualTable<Type>({ height, renderer, fetcher }: Args<Type>): JSX.Element {
     const ref = useRef(null);
     const [collection, setCollection] = useState<LazyPaginatedCollection<Type>>(new LazyPaginatedCollection<Type>(1, fetcher));
 
@@ -174,7 +174,7 @@ function VirtualTable<Type>({ height, renderer, fetcher }: Args<Type>) {
     });
 
     if (state.items.length === 0) {
-        return null;
+        return <div />;
     }
 
     return (
@@ -221,5 +221,3 @@ VirtualTable.propTypes = {
 
 VirtualTable.defaultProps = {
 };
-
-export default VirtualTable;

src/index.ts

@@ -5,7 +5,10 @@
  */
 
 import VirtualTable from './VirtualTable';
+import { Result, Fetcher } from './helpers/types';
 
 export {
     VirtualTable,
+    Result,
+    Fetcher,
 };

testApp/src/index.tsx

@@ -25,7 +25,7 @@ const fetchData = (index: number, count: number): Promise<Result<number>> => {
 
 function App() {
     return (
-        <VirtualTable
+        <VirtualTable<number>
             renderer={(i) => <div style={{ padding: 5 }}>{i !== undefined ? i : 'unknown'}</div>}
             height={400}
             fetcher={fetchData}

webpack.config.js

@@ -8,9 +8,23 @@ module.exports = (env = {}) => {
         entry: './src/index.ts',
         output: {
             path: path.resolve('dist'),
-            filename: 'main.js',
+            filename: 'index.js',
             libraryTarget: 'commonjs2',
         },
+        externals: {
+            "react": {
+                "commonjs": "react",
+                "commonjs2": "react",
+                "amd": "react",
+                "root": "React"
+            },
+            "react-dom": {
+                "commonjs": "react-dom",
+                "commonjs2": "react-dom",
+                "amd": "react-dom",
+                "root": "ReactDOM"
+            }
+        },
         plugins: [new ESLintPlugin()],
         module: {
             rules: [