init Observer

.eslintrc.js

@@ -9,5 +9,8 @@ module.exports = {
     'react/no-array-index-key': 0,
     'react/sort-comp': 0,
     '@typescript-eslint/no-explicit-any': 0,
+    'react/no-find-dom-node': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/label-has-for': 0,
   },
 };

examples/basic.tsx

@@ -0,0 +1,41 @@
+import '../assets/index.less';
+import React from 'react';
+import ResizeObserver from '../src';
+
+export default function App() {
+  const [times, setTimes] = React.useState(0);
+  const [disabled, setDisabled] = React.useState(false);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    console.log('Ref:', textareaRef.current);
+  }, []);
+
+  const onResize = () => {
+    setTimes(prevTimes => prevTimes + 1);
+  };
+
+  return (
+    <React.StrictMode>
+      <div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => {
+                setDisabled(!disabled);
+              }}
+              checked={disabled}
+            />{' '}
+            Disabled Observe
+          </label>
+          {' >>> '}
+          <span>Resize times: {times}</span>
+        </div>
+        <ResizeObserver onResize={onResize} disabled={disabled}>
+          <textarea ref={textareaRef} placeholder="I'm a textarea!" />
+        </ResizeObserver>
+      </div>
+    </React.StrictMode>
+  );
+}

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "rc-footer",
+  "name": "rc-resize-observer",
   "version": "0.5.0",
-  "description": "Pretty Footer react component used in used in ant.design",
+  "description": "Resize observer for React",
   "keywords": [
     "react",
     "react-component",
-    "react-footer",
-    "footer",
+    "react-resize-observer",
+    "resize-observer",
     "antd",
     "ant-design"
   ],
@@ -19,13 +19,13 @@
     "lib",
     "dist"
   ],
-  "homepage": "https://react-component.github.io/footer",
+  "homepage": "https://react-component.github.io/resize-observer",
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-component/footer.git"
+    "url": "git@github.com:react-component/resize-observer.git"
   },
   "bugs": {
-    "url": "http://github.com/react-component/footer/issues"
+    "url": "http://github.com/react-component/resize-observer/issues"
   },
   "license": "MIT",
   "scripts": {
@@ -40,7 +40,9 @@
     "coverage": "father test --coverage"
   },
   "dependencies": {
-    "classnames": "^2.2.1"
+    "classnames": "^2.2.1",
+    "rc-util": "^4.11.1",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",