├── .dumirc.ts ├── .editorconfig ├── .eslintrc.js ├── .fatherrc.js ├── .github ├── dependabot.yml └── workflows │ ├── codeql.yml │ └── react-component-ci.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── assets └── index.less ├── bunfig.toml ├── docs ├── demo │ ├── basic.md │ ├── collection.md │ ├── debug.md │ └── renderProps.md └── index.md ├── examples ├── basic.tsx ├── collection.tsx ├── debug.tsx └── renderProps.tsx ├── jest.config.js ├── package.json ├── src ├── Collection.tsx ├── SingleObserver │ └── index.tsx ├── index.tsx └── utils │ └── observerUtil.ts ├── tests ├── Collection.spec.js ├── index.spec.js ├── ref.spec.tsx ├── setup.js └── utils │ └── domHook.js ├── tsconfig.json └── update-example.js /.dumirc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'dumi'; 2 | 3 | export default defineConfig({ 4 | favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], 5 | themeConfig: { 6 | name: 'resize-observer', 7 | logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', 8 | }, 9 | styles: [ 10 | ` 11 | section.dumi-default-header-left { 12 | width: 230px; 13 | } 14 | .markdown table { 15 | width: auto !important; 16 | } 17 | `, 18 | ], 19 | }); 20 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*.{js,css,md}] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const base = require('@umijs/fabric/dist/eslint'); 2 | 3 | module.exports = { 4 | ...base, 5 | rules: { 6 | ...base.rules, 7 | 'no-template-curly-in-string': 0, 8 | 'prefer-promise-reject-errors': 0, 9 | 'react/no-array-index-key': 0, 10 | 'react/sort-comp': 0, 11 | '@typescript-eslint/no-explicit-any': 0, 12 | 'react/no-find-dom-node': 0, 13 | 'jsx-a11y/label-has-associated-control': 0, 14 | 'jsx-a11y/label-has-for': 0, 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /.fatherrc.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'father'; 2 | 3 | export default defineConfig({ 4 | plugins: ['@rc-component/father-plugin'], 5 | }); -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | time: "21:00" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: np 11 | versions: 12 | - 7.2.0 13 | - 7.3.0 14 | - 7.4.0 15 | - dependency-name: "@types/react" 16 | versions: 17 | - 17.0.0 18 | - 17.0.1 19 | - 17.0.2 20 | - 17.0.3 21 | - dependency-name: "@types/react-dom" 22 | versions: 23 | - 17.0.0 24 | - 17.0.1 25 | - 17.0.2 26 | - dependency-name: less 27 | versions: 28 | - 4.1.0 29 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: [ "master" ] 6 | pull_request: 7 | branches: [ "master" ] 8 | schedule: 9 | - cron: "22 1 * * 0" 10 | 11 | jobs: 12 | analyze: 13 | name: Analyze 14 | runs-on: ubuntu-latest 15 | permissions: 16 | actions: read 17 | contents: read 18 | security-events: write 19 | 20 | strategy: 21 | fail-fast: false 22 | matrix: 23 | language: [ javascript ] 24 | 25 | steps: 26 | - name: Checkout 27 | uses: actions/checkout@v3 28 | 29 | - name: Initialize CodeQL 30 | uses: github/codeql-action/init@v2 31 | with: 32 | languages: ${{ matrix.language }} 33 | queries: +security-and-quality 34 | 35 | - name: Autobuild 36 | uses: github/codeql-action/autobuild@v2 37 | 38 | - name: Perform CodeQL Analysis 39 | uses: github/codeql-action/analyze@v2 40 | with: 41 | category: "/language:${{ matrix.language }}" 42 | -------------------------------------------------------------------------------- /.github/workflows/react-component-ci.yml: -------------------------------------------------------------------------------- 1 | name: ✅ test 2 | on: [push, pull_request] 3 | jobs: 4 | test: 5 | uses: react-component/rc-test/.github/workflows/test.yml@main 6 | secrets: inherit -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | *.log 3 | .idea/ 4 | .ipr 5 | .iws 6 | *~ 7 | ~* 8 | *.diff 9 | *.patch 10 | *.bak 11 | .DS_Store 12 | Thumbs.db 13 | .project 14 | .*proj 15 | .svn/ 16 | *.swp 17 | *.swo 18 | *.pyc 19 | *.pyo 20 | .build 21 | node_modules 22 | .cache 23 | assets/**/*.css 24 | build 25 | lib 26 | es 27 | yarn.lock 28 | package-lock.json 29 | coverage/ 30 | .doc 31 | # dumi 32 | .dumi/tmp 33 | .dumi/tmp-test 34 | .dumi/tmp-production 35 | .env.local 36 | .node 37 | dist/ 38 | 39 | bun.lockb -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build/ 2 | *.cfg 3 | nohup.out 4 | *.iml 5 | .idea/ 6 | .ipr 7 | .iws 8 | *~ 9 | ~* 10 | *.diff 11 | *.log 12 | *.patch 13 | *.bak 14 | .DS_Store 15 | Thumbs.db 16 | .project 17 | .*proj 18 | .svn/ 19 | *.swp 20 | out/ 21 | .build 22 | node_modules 23 | .cache 24 | examples 25 | tests 26 | src 27 | /index.js 28 | .* 29 | assets/**/*.less -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | es 4 | .cache 5 | package.json 6 | package-lock.json 7 | public 8 | .site 9 | _site 10 | .doc 11 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "all", 7 | "printWidth": 100, 8 | "arrowParens": "avoid" 9 | } 10 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.5.0 4 | 5 | - support `theme="dark|light"`. 6 | 7 | ## 0.4.0 8 | 9 | - support `columnLayout`. 10 | - support `backgroundColor`. 11 | 12 | ## 0.3.0 13 | 14 | - support `style` and `className` for footer column and footer item. 15 | - support `LinkComponent` for footer item. 16 | 17 | ## 0.2.0 18 | 19 | - Fix `lib` and `es` folders missing. 20 | 21 | ## 0.1.0 22 | 23 | - First release. 24 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019-present afc163 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rc-resize-observer 2 | 3 | [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url] 4 | 5 | [npm-image]: http://img.shields.io/npm/v/rc-resize-observer.svg?style=flat-square 6 | [npm-url]: http://npmjs.org/package/rc-resize-observer 7 | [github-actions-image]: https://github.com/react-component/resize-observer/workflows/CI/badge.svg 8 | [github-actions-url]: https://github.com/react-component/resize-observer/actions 9 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/resize-observer/master.svg?style=flat-square 10 | [codecov-url]: https://codecov.io/gh/react-component/resize-observer/branch/master 11 | [download-image]: https://img.shields.io/npm/dm/rc-resize-observer.svg?style=flat-square 12 | [download-url]: https://npmjs.org/package/rc-resize-observer 13 | 14 | Resize observer for React. 15 | 16 | ## Live Demo 17 | 18 | https://resize-observer-react-component.vercel.app/ 19 | 20 | ## Install 21 | 22 | [![rc-resize-observer](https://nodei.co/npm/rc-resize-observer.png)](https://npmjs.org/package/rc-resize-observer) 23 | 24 | ## Usage 25 | 26 | ```js 27 | import ResizeObserver from 'rc-resize-observer'; 28 | import { render } from 'react-dom'; 29 | 30 | render( 31 | { 33 | console.log('resized!'); 34 | }} 35 | > 36 |