🌳Maintainance Update (v8.0.0)

.eslintignore

@@ -1 +1,2 @@
-**/node_modules
+**/node_modules
+**/build

.eslintrc

@@ -1,19 +1,16 @@
 {
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "plugins": ["@typescript-eslint"],
   "env": {
     "browser": true,
     "node": true,
     "es6": true
   },
-  "plugins": ["@typescript-eslint"],
   "rules": {
-    "max-len": [2, 120],
     "react/jsx-filename-extension": 0,
-    "arrow-parens": ["error", "as-needed"],
     "react/destructuring-assignment": 0,
-    "comma-dangle": ["error", "never"],
-    "object-curly-newline": 0,
     "react/jsx-props-no-spreading": 0,
     "@typescript-eslint/explicit-module-boundary-types": "off"
   },

.prettierignore

@@ -0,0 +1,7 @@
+**/node_modules
+*/**/dist
+*.log
+.DS_Store
+build
+yarn.lock
+.eslintcache

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: 'none',
+  arrowParens: 'avoid',
+  endOfLine: 'lf'
+};

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
-  - "iojs"
+  - 'iojs'
 script: npm run test

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Denis Rul
+Copyright (c) 2023 Vitalii Maslianok
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,4 +1,4 @@
-# Handle element resizes like it's 2022!
+# Handle element resizes like it's 2023!
 
 <img src="https://img.shields.io/npm/dm/react-resize-detector?style=flat-square"> <img src="https://badgen.net/bundlephobia/minzip/react-resize-detector?style=flat-square"> <img src="https://badgen.net/bundlephobia/tree-shaking/react-resize-detector?style=flat-square">
 

examples/package.json

@@ -2,27 +2,29 @@
   "name": "examples",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "linklocal && react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^14.2.0",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^17.0.35",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
     "linklocal": "^2.8.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-resize-detector": "file:..",
     "react-scripts": "5.0.1",
-    "typescript": "^4.7.2",
     "web-vitals": "^2.1.4"
   },
-  "scripts": {
-    "start": "linklocal && react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.5",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "typescript": "^4.9.4"
   },
   "eslintConfig": {
     "extends": [

examples/public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

examples/src/App.tsx

@@ -1,8 +1,5 @@
-import React, { ReactElement, useEffect, useState } from 'react';
-import { useRef } from 'react';
-import { createRef } from 'react';
-import { RefObject } from 'react';
-import ReactResizeDetector, { useResizeDetector, withResizeDetector } from 'react-resize-detector';
+import React, { useEffect, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
 const s = {
   wrapper: {
@@ -83,6 +80,8 @@ const App = () => {
 
 // #### 2. HOC pattern
 
+// import { withResizeDetector } from 'react-resize-detector';
+
 // const MainFrameInner = ({ onHideLeftPanel, width, height }: MainFramePropsType) => {
 //   const [count, setCount] = useState(0);
 
@@ -126,6 +125,8 @@ const App = () => {
 
 // #### 3. Child Function Pattern
 
+// import ReactResizeDetector from 'react-resize-detector';
+
 // const MainFrameInner = ({ onHideLeftPanel, width, height }: MainFramePropsType) => {
 //   const [count, setCount] = useState(0);
 

examples/src/index.css

@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

examples/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }