Convert to function component, fix demo

Author: jorrit

.eslintrc.json

@@ -13,13 +13,15 @@
     }
   },
   "extends": [
-    "plugin:react/recommended",
     // Uses the recommended rules from @eslint-plugin-react
+    "plugin:react/recommended",
+    // No react-import
+    "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
     // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    "plugin:prettier/recommended"
+    "plugin:@typescript-eslint/recommended",
     // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
+    "plugin:prettier/recommended"
   ],
   "rules": {
   }

README.md

@@ -10,6 +10,11 @@ A responsive container for displaying tables traditionally on wide screens and w
 
 `npm install react-hyper-responsive-table`
 
+This module uses `useSyncExternalStore`, which was introduced in React 18. If you are still using React 17 or older, also install
+[use-sync-external-store](https://www.npmjs.com/package/use-sync-external-store):
+
+`npm install use-sync-external-store`
+
 ## Example
 
 ```jsx

babel.config.js

@@ -12,7 +12,7 @@ module.exports = {
     ],
 
     ['@babel/preset-env', { targets: { node: 'current' } }],
-    '@babel/preset-react',
+    ['@babel/preset-react', { runtime: 'automatic' }],
   ],
   plugins: ['@babel/plugin-transform-runtime'],
 };

demo/src/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from 'react-dom';
 
 import './demo.css';
@@ -59,4 +58,4 @@ const Demo = () => (
   </div>
 );
 
-render(<Demo />, document.querySelector('#demo'));
+render(<Demo />, document.querySelector('body'));

demo/src/rollup.config.mjs

@@ -0,0 +1,45 @@
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import css from 'rollup-plugin-import-css';
+import commonjs from '@rollup/plugin-commonjs';
+import html from '@rollup/plugin-html';
+import terser from '@rollup/plugin-terser';
+
+const inputDir = dirname(fileURLToPath(import.meta.url));
+const outputDir = join(inputDir, '..', 'dist');
+
+export default {
+  input: join(inputDir, 'index.tsx'),
+  external: [''],
+  output: [
+    {
+      dir: outputDir,
+      format: 'es',
+      sourcemap: false,
+    },
+  ],
+  plugins: [
+    nodeResolve({ browser: true }),
+    commonjs({}),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+      },
+    }),
+    terser({
+      compress: { global_defs: { 'process.env.NODE_ENV': 'production' } },
+    }),
+    css({}),
+    html({
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width,initial-scale=1,shrink-to-fit=no' },
+      ],
+      title: 'react-hyper-responsive-table demo',
+    }),
+  ],
+};