├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── workflow.yml ├── .gitignore ├── .husky └── pre-commit ├── .npmignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── .releaserc.json ├── CHANGELOG.md ├── Code_of_Conduct.md ├── Contributing.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── jest.config.ts ├── package.json ├── rollup.config.js ├── src ├── __tests__ │ ├── jest.setup.ts │ ├── todo.spec.ts │ └── tsconfig.json ├── hooks │ ├── index.ts │ ├── use-deps-change │ │ ├── index.ts │ │ └── use-deps-change.hook.ts │ ├── use-did-mount │ │ ├── index.ts │ │ └── use-did-mount.hook.ts │ ├── use-did-update │ │ ├── index.ts │ │ └── use-did-update.hook.ts │ ├── use-force-update │ │ ├── index.ts │ │ └── use-force-update.hook.ts │ ├── use-is-mounted │ │ ├── index.ts │ │ └── use-is-mounted.hook.ts │ ├── use-layout-mount │ │ ├── index.ts │ │ └── use-layout-mount.hook.ts │ ├── use-layout-update │ │ ├── index.ts │ │ └── use-layout-update.hook.ts │ ├── use-will-mount │ │ ├── index.ts │ │ └── use-will-mount.hook.ts │ └── use-will-unmount │ │ ├── index.ts │ │ └── use-will-unmount.hook.ts ├── index.ts ├── react-app-env.d.ts └── setupTests.ts ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | jest.config.ts 4 | babel.config.js 5 | rollup.config.js 6 | jest.config.js 7 | tsconfig.json 8 | coverage 9 | temp 10 | commitlint.config.js -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 11, 6 | "ecmaFeatures": { 7 | "jsx": true 8 | }, 9 | "project": "./tsconfig.json" 10 | }, 11 | "settings": { 12 | "import/resolver": { 13 | "node": { 14 | "moduleDirectory": ["node_modules", "src/"] 15 | } 16 | }, 17 | "react": { 18 | "pragma": "React", 19 | "version": "detect" 20 | } 21 | }, 22 | "plugins": ["react", "react-hooks"], 23 | "extends": [ 24 | "eslint:recommended", 25 | "plugin:react-hooks/recommended", 26 | "prettier", 27 | "plugin:react/recommended", 28 | "plugin:@typescript-eslint/recommended", 29 | "plugin:import/typescript", 30 | "airbnb", 31 | "airbnb-typescript", 32 | "plugin:prettier/recommended" 33 | ], 34 | "rules": { 35 | "react-hooks/rules-of-hooks": "error", 36 | "react-hooks/exhaustive-deps": "warn", 37 | "react/prop-types": "off", 38 | "react/jsx-uses-react": "error", 39 | "react/jsx-uses-vars": "error", 40 | "no-console": ["error", { "allow": ["warn", "error"] }], 41 | "react/react-in-jsx-scope": "off", 42 | "react/display-name": 0, 43 | "import/no-extraneous-dependencies": 0, 44 | "import/prefer-default-export": 0, 45 | "import/no-cycle": 0, 46 | "@typescript-eslint/no-explicit-any": 0, 47 | "@typescript-eslint/lines-between-class-members": "off", 48 | "prettier/prettier": ["error"], 49 | "consistent-return": 0, 50 | "@typescript-eslint/no-throw-literal": 0, 51 | "no-underscore-dangle": 0, 52 | "react/function-component-definition": 0, 53 | "testing-library/render-result-naming-convention": "off", 54 | "import/order": [ 55 | "error", 56 | { 57 | "groups": [ 58 | ["builtin", "external"], 59 | ["internal", "parent", "sibling", "index"] 60 | ], 61 | "pathGroups": [ 62 | { "pattern": "assets/**", "group": "sibling", "position": "after" }, 63 | { 64 | "pattern": "@external/**/*.css", 65 | "group": "sibling", 66 | "position": "after" 67 | }, 68 | { 69 | "pattern": "*.css", 70 | "group": "index", 71 | "patternOptions": { "matchBase": true }, 72 | "position": "after" 73 | } 74 | ], 75 | "warnOnUnassignedImports": true, 76 | "pathGroupsExcludedImportTypes": ["css"], 77 | "newlines-between": "always" 78 | } 79 | ] 80 | }, 81 | "overrides": [ 82 | { 83 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 84 | "rules": { 85 | "testing-library/render-result-naming-convention": "off" 86 | } 87 | } 88 | ] 89 | } 90 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-detectable=false 2 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # This is a comment. 2 | # Each line is a file pattern followed by one or more owners. 3 | 4 | # These owners will be the default owners for everything in 5 | # the repo. Unless a later match takes precedence, they will 6 | # be requested for review when someone opens a pull request. 7 | * @prc5 8 | 9 | # Order is important; the last matching pattern takes the most 10 | # precedence. When someone opens a pull request that only 11 | # modifies JS files, only @js-owner and not the global 12 | # owner(s) will be requested for a review. 13 | # *.js @js-owner 14 | 15 | # You can also use email addresses if you prefer. They'll be 16 | # used to look up users just like we do for commit author 17 | # emails. 18 | # *.go docs@example.com 19 | 20 | # In this example, @doctocat owns any files in the build/logs 21 | # directory at the root of the repository and any of its 22 | # subdirectories. 23 | # /build/logs/ @doctocat 24 | 25 | # The `docs/*` pattern will match files like 26 | # `docs/getting-started.md` but not further nested files like 27 | # `docs/build-app/troubleshooting.md`. 28 | # docs/* docs@example.com 29 | 30 | # In this example, @octocat owns any file in an apps directory 31 | # anywhere in your repository. 32 | # apps/ @octocat 33 | 34 | # In this example, @doctocat owns any file in the `/docs` 35 | # directory in the root of your repository. 36 | # /docs/ @doctocat -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/workflow.yml: -------------------------------------------------------------------------------- 1 | name: Workflow 2 | on: push 3 | 4 | concurrency: 5 | group: 6 | "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || 7 | github.ref }}" 8 | cancel-in-progress: true 9 | 10 | defaults: 11 | run: 12 | shell: sh 13 | 14 | jobs: 15 | prepare-environment: 16 | runs-on: ubuntu-latest 17 | name: Prepare environment 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@v3 21 | - uses: actions/setup-node@v3 22 | with: 23 | node-version: "18" 24 | cache: "yarn" 25 | cache-dependency-path: yarn.lock 26 | env: 27 | FORCE_COLOR: 0 28 | - name: Install node_modules on cache miss 29 | if: steps.cache-node-modules.outputs.cache-hit != 'true' 30 | run: yarn install --frozen-lockfile 31 | - name: Cache node_modules 32 | if: steps.cache-node-modules.outputs.cache-hit != 'true' 33 | uses: actions/cache/save@v3 34 | with: 35 | path: node_modules 36 | key: yarn-${{ hashFiles('yarn.lock') }} 37 | 38 | tests: 39 | name: Run tests 40 | runs-on: ubuntu-latest 41 | needs: prepare-environment 42 | # Tests timeout after 40 minutes 43 | timeout-minutes: 40 44 | permissions: 45 | contents: read 46 | steps: 47 | - name: Checkout 48 | uses: actions/checkout@v3 49 | - name: Set up Node.js 50 | uses: actions/setup-node@v3 51 | with: 52 | node-version: "18" 53 | cache: "yarn" 54 | cache-dependency-path: yarn.lock 55 | - name: Restore node_modules 56 | uses: actions/cache/restore@v3 57 | id: cache-node-modules 58 | with: 59 | path: node_modules 60 | key: yarn-${{ hashFiles('yarn.lock') }} 61 | fail-on-cache-miss: false 62 | - name: Install node_modules on cache miss 63 | if: steps.cache-node-modules.outputs.cache-hit != 'true' 64 | run: yarn install --frozen-lockfile 65 | - name: Build 66 | run: yarn build 67 | - name: Lint 68 | run: yarn lint 69 | - name: Clear Jest 70 | run: yarn jest --clearCache 71 | - name: Test 72 | run: yarn test --coverage 73 | # - name: Send Report 74 | # uses: paambaati/codeclimate-action@v3.0.0 75 | # env: 76 | # CC_TEST_REPORTER_ID: c206a2ed5aa86c7480a13634e91e440a27a98a5d134653f8ea9a7d5f987e68c3 77 | # with: 78 | # coverageLocations: | 79 | # ${{github.workspace}}/packages/core/coverage/lcov.info:lcov 80 | # ${{github.workspace}}/packages/react/coverage/lcov.info:lcov 81 | 82 | release: 83 | name: Release 84 | if: ${{ github.ref == 'refs/heads/main' }} 85 | runs-on: ubuntu-latest 86 | needs: tests 87 | steps: 88 | - name: Checkout 89 | uses: actions/checkout@v3 90 | - name: Set up Node.js 91 | uses: actions/setup-node@v3 92 | with: 93 | node-version: "18" 94 | cache: "yarn" 95 | cache-dependency-path: yarn.lock 96 | - name: Restore node_modules 97 | uses: actions/cache/restore@v3 98 | id: cache-node-modules 99 | with: 100 | path: node_modules 101 | key: yarn-${{ hashFiles('yarn.lock') }} 102 | fail-on-cache-miss: false 103 | - name: Install node_modules on cache miss 104 | if: steps.cache-node-modules.outputs.cache-hit != 'true' 105 | run: yarn install --frozen-lockfile 106 | - name: Build 107 | run: yarn build 108 | - name: Publish 109 | run: yarn release 110 | env: 111 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 112 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 113 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /dist 14 | 15 | # misc 16 | .eslintcache 17 | .idea 18 | .vscode 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit "$1" 5 | yarn lint 6 | yarn test -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | node_modules -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /dist 4 | /coverage -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": false, 7 | "trailingComma": "all", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "proseWrap": "always", 11 | "arrowParens": "always" 12 | } 13 | -------------------------------------------------------------------------------- /.releaserc.json: -------------------------------------------------------------------------------- 1 | { 2 | "branches": [ 3 | "+([0-9])?(.{+([0-9]),x}).x", 4 | { 5 | "name": "main" 6 | }, 7 | { 8 | "name": "beta", 9 | "prerelease": true 10 | }, 11 | { 12 | "name": "alpha", 13 | "prerelease": true 14 | } 15 | ], 16 | "release": { 17 | "plugins": [ 18 | [ 19 | "@semantic-release/commit-analyzer", 20 | { 21 | "releaseRules": [ 22 | { 23 | "scope": "no-release", 24 | "release": false 25 | }, 26 | { 27 | "breaking": true, 28 | "release": "major" 29 | }, 30 | { 31 | "type": "feat", 32 | "release": "minor" 33 | }, 34 | { 35 | "type": "refactor", 36 | "scope": "core-*", 37 | "release": "minor" 38 | }, 39 | { 40 | "type": "*", 41 | "release": "patch" 42 | } 43 | ] 44 | } 45 | ], 46 | [ 47 | "@semantic-release/changelog", 48 | { 49 | "changelogFile": "CHANGELOG.md" 50 | } 51 | ], 52 | "@semantic-release/release-notes-generator", 53 | "@semantic-release/npm", 54 | [ 55 | "@semantic-release/git", 56 | { 57 | "assets": ["CHANGELOG.md"] 58 | } 59 | ], 60 | "@semantic-release/github" 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | ## Version: 0.1.0 4 | 5 | ##### Published: 17.10.2021 6 | 7 | - Added: useDidMount hook 8 | - Added: useDidRender hook 9 | - Added: useDidUpdate hook 10 | - Added: useWillUnmount hook 11 | -------------------------------------------------------------------------------- /Code_of_Conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make 6 | participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, 7 | disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, 8 | socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 9 | 10 | ## Our Standards 11 | 12 | Examples of behavior that contributes to creating a positive environment include: 13 | 14 | - Using welcoming and inclusive language 15 | - Being respectful of differing viewpoints and experiences 16 | - Gracefully accepting constructive criticism 17 | - Focusing on what is best for the community 18 | - Showing empathy towards other community members 19 | 20 | Examples of unacceptable behavior by participants include: 21 | 22 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 23 | - Trolling, insulting/derogatory comments, and personal or political attacks 24 | - Public or private harassment 25 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 26 | - Other conduct which could reasonably be considered inappropriate in a professional setting 27 | 28 | ## Our Responsibilities 29 | 30 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take 31 | appropriate and fair corrective action in response to any instances of unacceptable behavior. 32 | 33 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, 34 | issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any 35 | contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 36 | 37 | ## Scope 38 | 39 | This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the 40 | project or its community in public spaces. Examples of representing a project or community include using an official 41 | project e-mail address, posting via an official social media account, or acting as an appointed representative at an 42 | online or offline event. Representation of a project may be further defined and clarified by project maintainers. 43 | 44 | ## Enforcement 45 | 46 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at 47 | maciekpyrc@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed 48 | necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to 49 | the reporter of an incident. Further details of specific enforcement policies may be posted separately. 50 | 51 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent 52 | repercussions as determined by other members of the project's leadership. 53 | 54 | ## Attribution 55 | 56 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at 57 | https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 58 | 59 | [homepage]: https://www.contributor-covenant.org 60 | 61 | For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq 62 | -------------------------------------------------------------------------------- /Contributing.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Contributing 4 | 5 | First off, thanks for taking the time to contribute! ❤️ 6 | 7 | All types of contributions are encouraged and valued. See the 8 | [Table of Contents](#table-of-contents) for different ways to help and details about how this 9 | project handles them. Please make sure to read the relevant section before making your contribution. 10 | It will make it a lot easier for us maintainers and smooth out the experience for all involved. The 11 | community looks forward to your contributions. 🎉 12 | 13 | > And if you like the project, but just don't have time to contribute, that's fine. There are other 14 | > easy ways to support the project and show your appreciation, which we would also be very happy 15 | > about: 16 | > 17 | > - Star the project 18 | > - Tweet about it 19 | > - Refer this project in your project's readme 20 | > - Mention the project at local meetups and tell your friends/colleagues 21 | 22 | 23 | 24 | ## Table of Contents 25 | 26 | - [Contributing](#contributing) 27 | - [Table of Contents](#table-of-contents) 28 | - [I Have a Question](#i-have-a-question) 29 | - [I Want To Contribute](#i-want-to-contribute) 30 | - [Reporting Bugs](#reporting-bugs) 31 | - [Before Submitting a Bug Report](#before-submitting-a-bug-report) 32 | - [How Do I Submit a Good Bug Report?](#how-do-i-submit-a-good-bug-report) 33 | - [Suggesting Enhancements](#suggesting-enhancements) 34 | - [Before Submitting an Enhancement](#before-submitting-an-enhancement) 35 | - [How Do I Submit a Good Enhancement Suggestion?](#how-do-i-submit-a-good-enhancement-suggestion) 36 | - [Your First Code Contribution](#your-first-code-contribution) 37 | - [Improving The Documentation](#improving-the-documentation) 38 | - [Styleguides](#styleguides) 39 | - [Commit Messages](#commit-messages) 40 | - [Join The Project Team](#join-the-project-team) 41 | - [Attribution](#attribution) 42 | 43 | ## I Have a Question 44 | 45 | > If you want to ask a question, we assume that you have read the available documentation or README 46 | 47 | Before you ask a question, it is best to search for existing Issues that might help you. In case you 48 | have found a suitable issue and still need clarification, you can write your question in this issue. 49 | It is also advisable to search the internet for answers first. 50 | 51 | If you then still feel the need to ask a question and need clarification, we recommend the 52 | following: 53 | 54 | - Open an Issue. 55 | - Provide as much context as you can about what you're running into. 56 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. 57 | 58 | We will then take care of the issue as soon as possible. 59 | 60 | 74 | 75 | ## I Want To Contribute 76 | 77 | > ### Legal Notice 78 | > 79 | > When contributing to this project, you must agree that you have authored 100% of the content, that 80 | > you have the necessary rights to the content and that the content you contribute may be provided 81 | > under the project license. 82 | 83 | ### Reporting Bugs 84 | 85 | 86 | 87 | #### Before Submitting a Bug Report 88 | 89 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we 90 | ask you to investigate carefully, collect information and describe the issue in detail in your 91 | report. Please complete the following steps in advance to help us fix any potential bug as fast as 92 | possible. 93 | 94 | - Make sure that you are using the latest version. 95 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible 96 | environment components/versions (Make sure that you have read the documentation. If you are 97 | looking for support, you might want to check [this section](#i-have-a-question)). 98 | - To see if other users have experienced (and potentially already solved) the same issue you are 99 | having, check if there is not already a bug report existing for your bug or error in the bug 100 | tracker. 101 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the 102 | GitHub community have discussed the issue. 103 | - Collect information about the bug: 104 | - Stack trace (Traceback) 105 | - OS, Platform and Version (Windows, Linux, macOS, x86, ARM) 106 | - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what 107 | seems relevant. 108 | - Possibly your input and the output 109 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions? 110 | 111 | 112 | 113 | #### How Do I Submit a Good Bug Report? 114 | 115 | > You must never report security related issues, vulnerabilities or bugs including sensitive 116 | > information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by 117 | > email to <>. 118 | 119 | 120 | 121 | We use GitHub issues to track bugs and errors. If you run into an issue with the project: 122 | 123 | - Open an Issue. (Since we can't be sure at this point whether it is a bug or not, we ask you not to 124 | talk about a bug yet and not to label the issue.) 125 | - Explain the behavior you would expect and the actual behavior. 126 | - Please provide as much context as possible and describe the _reproduction steps_ that someone else 127 | can follow to recreate the issue on their own. This usually includes your code. For good bug 128 | reports you should isolate the problem and create a reduced test case. 129 | - Provide the information you collected in the previous section. 130 | 131 | Once it's filed: 132 | 133 | - The project team will label the issue accordingly. 134 | - A team member will try to reproduce the issue with your provided steps. If there are no 135 | reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps 136 | and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until 137 | they are reproduced. 138 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly 139 | other tags (such as `critical`), and the issue will be left to be 140 | [implemented by someone](#your-first-code-contribution). 141 | 142 | 143 | 144 | ### Suggesting Enhancements 145 | 146 | This section guides you through submitting an enhancement suggestion, **including completely new 147 | features and minor improvements to existing functionality**. Following these guidelines will help 148 | maintainers and the community to understand your suggestion and find related suggestions. 149 | 150 | 151 | 152 | #### Before Submitting an Enhancement 153 | 154 | - Make sure that you are using the latest version. 155 | - Read the README carefully and find out if the functionality is already covered, maybe by an 156 | individual configuration. 157 | - Perform a search to see if the enhancement has already been suggested. If it has, add a comment to 158 | the existing issue instead of opening a new one. 159 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a 160 | strong case to convince the project's developers of the merits of this feature. Keep in mind that 161 | we want features that will be useful to the majority of our users and not just a small subset. If 162 | you're just targeting a minority of users, consider writing an add-on/plugin library. 163 | 164 | 165 | 166 | #### How Do I Submit a Good Enhancement Suggestion? 167 | 168 | Enhancement suggestions are tracked as GitHub issues. 169 | 170 | - Use a **clear and descriptive title** for the issue to identify the suggestion. 171 | - Provide a **step-by-step description of the suggested enhancement** in as many details as 172 | possible. 173 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and 174 | why. At this point you can also tell which alternatives do not work for you. 175 | - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or 176 | point out the part which the suggestion is related to. 177 | - **Explain why this enhancement would be useful** to most users. You may also want to point out the 178 | other projects that solved it better and which could serve as inspiration. 179 | 180 | ### Your First Code Contribution 181 | 182 | Checkout [this tutorial](https://github.com/firstcontributions/first-contributions) of how to 183 | contribute to any project. 184 | 185 | ### Improving The Documentation 186 | 187 | Anyone can help improve the documentation - it is in this repository and is available to everyone - 188 | if you have an idea how to improve it - send us a pull request and we will try to consider it as 189 | soon as possible! 190 | 191 | ## Styleguides 192 | 193 | Each contribution must meet the conditions of our linter and formatter. When these criteria are not 194 | met, the creator will get the appropriate status from github actions, if issues are not corrected 195 | within two weeks, the pull request will be rejected and closed immediately. 196 | 197 | ### Commit Messages 198 | 199 | Commit messages must follow the 200 | [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard and present the best 201 | possible description of the changes made, which will later be automatically placed in the release 202 | notes. They must not contain curses or offensive sentences. 203 | 204 | ## Join The Project Team 205 | 206 | Do you want to have a greater impact on the development of the library? Get in touch with us! 207 | 208 | ## Attribution 209 | 210 | This guide is based on the **contributing-gen**. 211 | [Make your own](https://github.com/bttger/contributing-gen)! 212 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 BetterTyped 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🧩 React Lifecycle Hooks 2 | 3 |

4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

29 | 30 | ## About 31 | 32 | React lifecycle turned into dev friendly and readable hooks 33 | 34 | ## Key Features 35 | 36 | 🔮 **Simple usage** 37 | 38 | 🚀 **Fast and light** 39 | 40 | 💎 **No external dependencies** 41 | 42 | 🪄 **Increases code readability** 43 | 44 | 🎊 **SSR Support** 45 | 46 | ## Installation 47 | 48 | ```bash 49 | npm install --save @better-hooks/lifecycle 50 | ``` 51 | 52 | or 53 | 54 | ```bash 55 | yarn add @better-hooks/lifecycle 56 | ``` 57 | 58 | --- 59 | 60 | ## Examples 61 | 62 | ```tsx 63 | import React from "react"; 64 | import { 65 | useDidMount, 66 | useDidUpdate, 67 | useWillUnmount, 68 | useIsMounted, 69 | useWillMount, 70 | useForceUpdate, 71 | useDidChange 72 | } from "@better-hooks/lifecycle"; 73 | 74 | const MyComponent: React.FC = (props) => { 75 | const [isOpen, setIsOpen] = React.useState(false) 76 | 77 | // returns ref with the mounted boolean state 78 | const mounted = useIsMounted() 79 | 80 | // Method for the component rerendering 81 | const forceUpdate = useForceUpdate() 82 | 83 | // Called before mount 84 | useWillMount(() => { 85 | // ... 86 | }) 87 | 88 | // Called on component mount 89 | useDidMount(() => { 90 | // ... 91 | }) 92 | 93 | // Called when isOpen change 94 | useDidUpdate(() => { 95 | // ... 96 | }, [isOpen]) 97 | 98 | // Called when isOpen change but also on mount 99 | useDidUpdate(() => { 100 | // ... 101 | }, [isOpen], true) 102 | 103 | // Called when dependencies change, we can inspect previous dependencies 104 | useDidChange((prevProps) => { 105 | if(prevProps[0].value !== props.value) { 106 | // ... 107 | } 108 | }, [props], true) 109 | 110 | // Called last 111 | useWillUnmount(() => { 112 | // ... 113 | }) 114 | 115 | 116 | return ( 117 | // ... 118 | ) 119 | } 120 | 121 | ``` 122 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ["@commitlint/config-conventional"] }; 2 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "@jest/types"; 2 | 3 | const config: Config.InitialOptions = { 4 | cacheDirectory: "./node_modules/.cache/jest", 5 | testEnvironment: "jsdom", 6 | preset: "ts-jest", 7 | testRegex: [".spec.ts", ".spec.tsx"], 8 | roots: ["/src"], 9 | coverageProvider: "v8", 10 | coverageReporters: [["lcov", { projectRoot: "../.." }], "clover", "json", "text"], 11 | collectCoverageFrom: ["/src/**/*.ts", "/src/**/*.tsx"], 12 | coveragePathIgnorePatterns: [".spec", "test", "tests", "types", "constants", "index.ts"], 13 | moduleDirectories: ["node_modules", "src"], 14 | globals: { 15 | "ts-jest": { 16 | tsconfig: "./tsconfig.json", 17 | isolatedModules: true, 18 | }, 19 | }, 20 | watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"], 21 | setupFilesAfterEnv: ["jest-extended/all", "/src/__tests__/jest.setup.ts"], 22 | }; 23 | export default config; 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@better-hooks/lifecycle", 3 | "version": "1.0.5", 4 | "author": "prc5", 5 | "license": "MIT", 6 | "description": "React lifecycle turned into dev friendly hooks", 7 | "repository": "BetterTyped/react-lifecycle-hooks", 8 | "main": "dist/index.cjs.js", 9 | "module": "dist/index.esm.js", 10 | "types": "dist/index.d.ts", 11 | "source": "src/index.ts", 12 | "jsnext:main": "dist/index.esm.js", 13 | "engines": { 14 | "node": ">=8", 15 | "npm": ">=5" 16 | }, 17 | "private": false, 18 | "peerDependencies": { 19 | "react": ">= 16.8.0" 20 | }, 21 | "publishConfig": { 22 | "access": "public", 23 | "registry": "https://registry.npmjs.com/" 24 | }, 25 | "scripts": { 26 | "build": "rollup -c", 27 | "prepare": "install-peers && yarn husky install", 28 | "lint": "eslint . --ext .js,.jsx,.tsx,.ts --fix", 29 | "test": "jest", 30 | "release": "yarn semantic-release" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | }, 50 | "devDependencies": { 51 | "@commitlint/cli": "^17.0.0", 52 | "@commitlint/config-conventional": "^17.0.2", 53 | "@rollup/plugin-babel": "^5.3.1", 54 | "@rollup/plugin-commonjs": "^22.0.2", 55 | "@rollup/plugin-node-resolve": "^14.1.0", 56 | "@semantic-release/changelog": "^6.0.1", 57 | "@semantic-release/commit-analyzer": "^9.0.2", 58 | "@semantic-release/git": "^10.0.1", 59 | "@semantic-release/github": "^8.0.6", 60 | "@semantic-release/npm": "^9.0.1", 61 | "@semantic-release/release-notes-generator": "^10.0.3", 62 | "@svgr/rollup": "^6.3.1", 63 | "@testing-library/jest-dom": "^5.16.5", 64 | "@testing-library/react": "^13.4.0", 65 | "@testing-library/user-event": "^14.4.3", 66 | "@types/jest": "^29.1.1", 67 | "@types/node": "^18.7.23", 68 | "@types/react": "^18.0.21", 69 | "@types/react-dom": "^18.0.6", 70 | "@typescript-eslint/eslint-plugin": "^5.28.0", 71 | "@typescript-eslint/parser": "^5.28.0", 72 | "@zerollup/ts-transform-paths": "^1.7.18", 73 | "commitlint": "^17.0.2", 74 | "eslint": "^8.17.0", 75 | "eslint-config-airbnb": "^19.0.4", 76 | "eslint-config-airbnb-typescript": "^17.0.0", 77 | "eslint-config-next": "12.1.6", 78 | "eslint-config-prettier": "^8.5.0", 79 | "eslint-config-react-app": "^7.0.1", 80 | "eslint-plugin-import": "^2.26.0", 81 | "eslint-plugin-jsx-a11y": "^6.5.1", 82 | "eslint-plugin-prettier": "^4.0.0", 83 | "eslint-plugin-react": "^7.30.0", 84 | "eslint-plugin-react-hooks": "^4.6.0", 85 | "gh-pages": "^4.0.0", 86 | "husky": "^8.0.1", 87 | "install-peers-cli": "^2.2.0", 88 | "jest": "^28.1.1", 89 | "jest-environment-jsdom": "^28.1.1", 90 | "jest-extended": "^2.0.0", 91 | "jest-watch-typeahead": "^1.1.0", 92 | "postcss": "^8.4.17", 93 | "prettier": "^2.6.2", 94 | "reflect-metadata": "^0.1.13", 95 | "rollup": "^2.79.1", 96 | "rollup-plugin-copy": "^3.4.0", 97 | "rollup-plugin-delete": "^2.0.0", 98 | "rollup-plugin-dts": "^4.2.2", 99 | "rollup-plugin-peer-deps-external": "^2.2.4", 100 | "rollup-plugin-postcss": "^4.0.2", 101 | "rollup-plugin-terser": "^7.0.2", 102 | "rollup-plugin-typescript2": "^0.34.0", 103 | "rollup-plugin-url": "^3.0.1", 104 | "semantic-release": "^19.0.5", 105 | "ts-jest": "^28.0.5", 106 | "ts-node": "~10.8.0", 107 | "tslib": "^2.3.0", 108 | "typescript": "^4.8.4" 109 | }, 110 | "files": [ 111 | "dist" 112 | ], 113 | "keywords": [ 114 | "react", 115 | "hooks", 116 | "lifecycle", 117 | "use", 118 | "did", 119 | "mount", 120 | "update", 121 | "unmount", 122 | "render", 123 | "hook", 124 | "useDidMount", 125 | "useDidUnmount", 126 | "useDidRender", 127 | "useWillUnmount" 128 | ] 129 | } 130 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import { DEFAULT_EXTENSIONS } from "@babel/core"; 3 | 4 | import pkg from "./package.json"; 5 | import resolve from "@rollup/plugin-node-resolve"; 6 | import babel from "@rollup/plugin-babel"; 7 | import external from "rollup-plugin-peer-deps-external"; 8 | import del from "rollup-plugin-delete"; 9 | import typescript from "rollup-plugin-typescript2"; 10 | import commonjs from "@rollup/plugin-commonjs"; 11 | import svgr from "@svgr/rollup"; 12 | import url from "rollup-plugin-url"; 13 | import postcss from "rollup-plugin-postcss"; 14 | import dts from "rollup-plugin-dts"; 15 | import { terser } from "rollup-plugin-terser"; 16 | 17 | export default [ 18 | { 19 | input: pkg.source, 20 | output: [ 21 | { file: pkg.main, format: "cjs", exports: "named", sourcemap: true }, 22 | { file: pkg.module, format: "esm", exports: "named", sourcemap: true }, 23 | ], 24 | plugins: [ 25 | del({ targets: ["dist/*"] }), 26 | external({ 27 | includeDependencies: true, 28 | }), 29 | resolve({ 30 | browser: true, 31 | moduleDirectories: ["node_modules", "src"], 32 | exclude: ["src/__tests__"], 33 | }), 34 | typescript({ 35 | declaration: true, 36 | tsconfigOverride: { 37 | exclude: ["node_modules", "**/__tests__"], 38 | }, 39 | }), 40 | commonjs({ 41 | include: ["node_modules/**"], 42 | }), 43 | babel({ 44 | exclude: ["node_modules/**"], 45 | extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"], 46 | }), 47 | postcss({ 48 | minimize: true, 49 | extract: "assets/styles/index.css", 50 | modules: { 51 | globalModulePaths: [/^((?!module.css)[\s\S])*$/], 52 | }, 53 | }), 54 | url({ 55 | fileName: "[dirname][hash][extname]", 56 | sourceDir: path.join(__dirname, "src"), 57 | }), 58 | svgr({ 59 | svgoConfig: { 60 | plugins: { 61 | removeViewBox: false, 62 | }, 63 | }, 64 | }), 65 | terser({ 66 | compress: true, 67 | }), 68 | ], 69 | external: Object.keys(pkg.peerDependencies || {}), 70 | }, 71 | { 72 | input: pkg.source, 73 | output: [{ file: pkg.types, format: "es" }], 74 | external: [/\.scss$/, /\.css$/], 75 | plugins: [ 76 | dts({ 77 | compilerOptions: { 78 | baseUrl: "./src", 79 | }, 80 | }), 81 | ], 82 | }, 83 | ]; 84 | -------------------------------------------------------------------------------- /src/__tests__/jest.setup.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | 7 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 8 | // @ts-ignore 9 | global.IS_REACT_ACT_ENVIRONMENT = true; 10 | -------------------------------------------------------------------------------- /src/__tests__/todo.spec.ts: -------------------------------------------------------------------------------- 1 | it("should initialize cache", async () => { 2 | expect(true).toBeTruthy(); 3 | }); 4 | -------------------------------------------------------------------------------- /src/__tests__/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noEmit": true, 4 | "baseUrl": "../src", 5 | "moduleResolution": "node", 6 | "esModuleInterop": true, 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["../jest.config.ts", "./"] 10 | } 11 | -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-deps-change"; 2 | export * from "./use-did-mount"; 3 | export * from "./use-did-update"; 4 | export * from "./use-force-update"; 5 | export * from "./use-is-mounted"; 6 | export * from "./use-layout-mount"; 7 | export * from "./use-layout-update"; 8 | export * from "./use-will-mount"; 9 | export * from "./use-will-unmount"; 10 | -------------------------------------------------------------------------------- /src/hooks/use-deps-change/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-deps-change.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-deps-change/use-deps-change.hook.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react"; 2 | 3 | export const useDepsChange = ( 4 | callback: VoidFunction | ((previousDependencies: T | null) => VoidFunction), 5 | dependencies: T, 6 | useOnMount = false, 7 | ) => { 8 | const prev = useRef(null); 9 | const mountRef = useRef(useOnMount); 10 | 11 | useEffect(() => { 12 | if (!mountRef.current) { 13 | mountRef.current = true; 14 | return; 15 | } 16 | 17 | return () => { 18 | callback(prev.current); 19 | prev.current = dependencies; 20 | }; 21 | // eslint-disable-next-line react-hooks/exhaustive-deps 22 | }, dependencies); 23 | }; 24 | -------------------------------------------------------------------------------- /src/hooks/use-did-mount/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-did-mount.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-did-mount/use-did-mount.hook.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/exhaustive-deps */ 2 | import { useEffect, useRef } from "react"; 3 | 4 | export const useDidMount = (callback: VoidFunction | (() => VoidFunction)) => { 5 | const mounted = useRef(false); 6 | 7 | useEffect(() => { 8 | if (!mounted.current) { 9 | mounted.current = true; 10 | return callback(); 11 | } 12 | }, []); 13 | }; 14 | -------------------------------------------------------------------------------- /src/hooks/use-did-update/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-did-update.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-did-update/use-did-update.hook.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/exhaustive-deps */ 2 | import { useEffect, useRef } from "react"; 3 | 4 | export const useDidUpdate = ( 5 | callback: VoidFunction | (() => VoidFunction), 6 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 7 | dependencies: any[], 8 | useOnMount = false, 9 | ) => { 10 | const mountRef = useRef(useOnMount); 11 | 12 | useEffect(() => { 13 | if (!mountRef.current) { 14 | mountRef.current = true; 15 | return; 16 | } 17 | 18 | return callback(); 19 | }, dependencies); 20 | }; 21 | -------------------------------------------------------------------------------- /src/hooks/use-force-update/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-force-update.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-force-update/use-force-update.hook.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from "react"; 2 | 3 | export const useForceUpdate = () => { 4 | const [, rerender] = useState(0); 5 | 6 | return useCallback(() => { 7 | rerender((prev) => prev + 1); 8 | }, []); 9 | }; 10 | -------------------------------------------------------------------------------- /src/hooks/use-is-mounted/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-is-mounted.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-is-mounted/use-is-mounted.hook.ts: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from "react"; 2 | 3 | export const useIsMounted = () => { 4 | const componentIsMounted = useRef(true); 5 | useEffect(() => { 6 | componentIsMounted.current = true; 7 | return () => { 8 | componentIsMounted.current = false; 9 | }; 10 | }, []); 11 | return componentIsMounted; 12 | }; 13 | -------------------------------------------------------------------------------- /src/hooks/use-layout-mount/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-layout-mount.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-layout-mount/use-layout-mount.hook.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/exhaustive-deps */ 2 | import { useLayoutEffect, useRef } from "react"; 3 | 4 | export const useLayoutMount = (callback: VoidFunction | (() => VoidFunction)) => { 5 | const mounted = useRef(false); 6 | 7 | useLayoutEffect(() => { 8 | if (!mounted.current) { 9 | mounted.current = true; 10 | return callback(); 11 | } 12 | }, []); 13 | }; 14 | -------------------------------------------------------------------------------- /src/hooks/use-layout-update/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-layout-update.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-layout-update/use-layout-update.hook.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/exhaustive-deps */ 2 | import { useLayoutEffect, useRef } from "react"; 3 | 4 | export const useLayoutUpdate = ( 5 | callback: VoidFunction | (() => VoidFunction), 6 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 7 | dependencies: any[], 8 | useOnMount = false, 9 | ) => { 10 | const mountRef = useRef(useOnMount); 11 | 12 | useLayoutEffect(() => { 13 | if (!mountRef.current) { 14 | mountRef.current = true; 15 | return; 16 | } 17 | 18 | return callback(); 19 | }, dependencies); 20 | }; 21 | -------------------------------------------------------------------------------- /src/hooks/use-will-mount/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-will-mount.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-will-mount/use-will-mount.hook.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | 3 | export const useWillMount = (callback: VoidFunction) => { 4 | const willMount = useRef(true); 5 | 6 | if (willMount.current) { 7 | callback(); 8 | } 9 | 10 | willMount.current = false; 11 | }; 12 | -------------------------------------------------------------------------------- /src/hooks/use-will-unmount/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-will-unmount.hook"; 2 | -------------------------------------------------------------------------------- /src/hooks/use-will-unmount/use-will-unmount.hook.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/exhaustive-deps */ 2 | import { useEffect } from "react"; 3 | 4 | export const useWillUnmount = (callback: VoidFunction) => { 5 | useEffect(() => callback, []); 6 | }; 7 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./hooks"; 2 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "downlevelIteration": true, 18 | "jsx": "react-jsx", 19 | "baseUrl": "src", 20 | "experimentalDecorators": true, 21 | "emitDecoratorMetadata": true, 22 | "noImplicitReturns": false, 23 | "strictPropertyInitialization": false 24 | }, 25 | "include": ["src"], 26 | "plugins": [{ "transform": "@zerollup/ts-transform-paths" }], 27 | "exclude": ["node_modules"] 28 | } 29 | --------------------------------------------------------------------------------