sshyam-gupta / react-router-prompt Goto Github PK

View Code? Open in Web Editor NEW

73.0 3.0 14.0 726 KB

A replacement component for the react-router 6 `Prompt`. Allows for more flexible dialogs.

Home Page: https://codesandbox.io/s/react-router-prompt-example-react-router-6-7-y9ug7z?file=/src/App.js

License: MIT License

HTML 12.80% TypeScript 87.20%

prompt react-prompt react-router react-router-dom-v6 react-router-v6 hacktoberfest

react-router-prompt's Introduction

react-router-prompt 🚨

A component for the react-router 6 Prompt. Allows to create more flexible dialogs.

Installation

Prerequisite

React-router-dom >= 6.19 and can be used only with data routers

pnpm add react-router-prompt

or with other package manager like yarn

yarn add react-router-prompt

Basic Usage

<ReactRouterPrompt when={isDirty}>
  {({ isActive, onConfirm, onCancel }) => (
    <Modal show={isActive}>
      <div>
        <p>Do you really want to leave?</p>
        <button onClick={onCancel}>Cancel</button>
        <button onClick={onConfirm}>Ok</button>
      </div>
    </Modal>
  )}
</ReactRouterPrompt>

Props

when: boolean | BlockerFunction

BlockerFunction = (args: {
  currentLocation: Location
  nextLocation: Location
  historyAction: HistoryAction
}) => boolean

beforeConfirm() : Promise<unknown> (Optional)
beforeCancel() : Promise<unknown> (Optional)

Return values

isActive: Boolean
onConfirm(): void
onCancel(): void

Note 🗒️

This version works with react-router-dom >=v6.19 Should be used within data routers

For react-router support (v6 - v6.2.x) please install v0.3.0

For react-router support (v6.7.x - v6.18.x) please install v0.5.4

Skipped support in middle due to breaking changes on react-router apis

Contributing

Contributions, issues and feature requests are always welcome! Feel free to check issues page.

Acknowledgements

Inspiration from react-router-navigation-prompt
Gist: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743

Support

Give a ⭐️ if this project helped you!

📝 License

About me

Website: sshyam-gupta.space
Twitter: @shyamm06
GitHub: @sshyam-gupta
LinkedIn: @shyam-gupta-66463a62

react-router-prompt's People

Contributors

Stargazers

Watchers

Forkers

ibetch jackbuehner rsup-fam maamri95 jacquesg karol-majewski tutanck sweethuman razor-1 andrewbusch7 googlesky slimshady795 aptuitiv

react-router-prompt's Issues

Breaks when more than one ReactRouterPrompt is used

Reproduction:

https://codesandbox.io/s/react-router-prompt-example-react-router-6-7-forked-ink76d

The navigation through links displays a message but resets the form.

Maybe this is not directly related, but this package does work correctly when I attempted to navigate with unsaved changes. However, the issue is that after clicking "cancel," my data gets reset.

Have to depend on @remix-run/router to pass a BlockerFunction in typescript?

Hi, I'm trying to pass a BlockerFunction as a when prop to ReactRouterPrompt in typescript.

Because I need to type my function definition, I need to import BlockerFunction from @remix-run/router, which means I need to depend on it, which is discouraged. I could use any for the type of args but not that keen on doing this either.

I think, if the ReactRouterPromptProps type is exported we can type it like ReactRouterPromptProps["when"]

I'm happy to raise the PR for this.

export usePrompt and useConfirm hooks

Thanks for the lib!

Would you mind exporting the hooks that you have (usePrompt and useConfirm), so that it'd be possible to use them?

Doesn't work with vite.js

This is the same problem stated here: vitejs/vite#2139 (comment)

I'm not familiar enough with the build tools to provide a PR and make sure that there's no breaking changes, sorry.

BlockerFunction has `unstable_` removed [email protected]

Can you please make react-router-prompt types compatible with react-router-dom v6.21.3?

new version has unstable_ removed

bug:使用浏览器的回退时，会优先执行children而不是when

详细描述一下，当我使用这个工具进行拦截路由跳转时，遇到浏览器回退和路由跳转不一样的效果。使用路由跳转时，先判断了when的条件，然后正常退出；但是用浏览器回退时并没有先判断条件，而是直接打开prompt组件又自己关闭了，但是页面却留在了当前页，再次点击浏览器回退时，才正常退出；

Types not correctly exported in package.json

This error occurs when trying to import in a Typescript project:

Seems to be fixed by added "types" to the export in the package.json:

`onCancel`,`onConfirm` requires unnecessary arguments.

"isActive" prop is false even while "when" is true

I'm using a ReactRouterPrompt and it works most of the time. But when I go to the same page (the page that has the Prompt) but with different url parameters and after trying to leave that page, I do not see my popup.

I debugged and the "isActive" prop is false even if "when" and all conditions give true.

Any help with this?

Thanks!

Enhancement: Add a way to hook into `onCancel` and `onConfirm`

I would like to be able to either hook into onCancel/onConfirm or change what they do.
Is this possible in the current version of the library? If not, is this something you would be interested in adding?
Thanks.

browser always shows the alert before reload, if 'when' is a function

'when' can be the BlockerFunction, in that case condition will be always true regardless the result of 'when'

react-router-prompt/src/hooks/use-prompt.ts

Line 32 in 0cfc480

if (when) {

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/codeql-analysis.yml

actions/checkout v4

github/codeql-action v2

github/codeql-action v2

github/codeql-action v2

.github/workflows/greetings.yml

actions/first-interaction v1

.github/workflows/publish-package.yml

actions/checkout v4

manovotny/github-releases-for-automated-package-publishing-action v2.0.1

pnpm/action-setup v2

actions/setup-node v4

.github/workflows/size-limit.yml

actions/checkout v4

pnpm/action-setup v2

andresz1/size-limit-action v1

npm

package.json

@size-limit/preset-small-lib ^11.0.2

@types/react ^18.2.55

@types/react-dom ^18.2.19

@typescript-eslint/eslint-plugin ^6.0.0

@typescript-eslint/parser ^7.0.1

@vitejs/plugin-react-swc ^3.6.0

eslint ^8.56.0

eslint-config-airbnb ^19.0.4

eslint-config-airbnb-typescript ^17.1.0

eslint-config-prettier ^9.1.0

eslint-plugin-import ^2.29.1

eslint-plugin-jsx-a11y ^6.8.0

eslint-plugin-prettier ^5.1.3

eslint-plugin-react ^7.33.2

eslint-plugin-react-hooks ^4.6.0

history ^5.3.0

husky ^9.0.11

path ^0.12.7

prettier ^3.2.5

react ^18.2.0

react-dom ^18.2.0

react-router-dom ^6.22.1

size-limit ^11.0.2

typescript ^5.3.3

vite ^5.1.3

vite-plugin-dts ^3.7.2

vite-tsconfig-paths ^4.3.1

react >=16.8

react-dom >=16.8

react-router-dom >=6.19

Check this box to trigger a request for Renovate to run again on this repository

"Cannot read properties of null (reading 'useEffect')" when used with React 17

Hello and thank you for your work. I gave the latest version a try, and it seems like there's a bug somewhere.

This happens to me when I use the following version of dependencies:

react 17.0.2
react-dom 17.0.2
react-router-dom
6.8.1
react-router-prompt 0.5.1

Reproduction:

https://codesandbox.io/s/react-router-prompt-example-react-router-6-7-forked-p3n31e

I noticed that react and react-dom are listed both as peer dependencies and regular dependencies — perhaps that could be the cause of a mismatch?

Uncaught Error: useBlocker must be used within a data router

I am getting an error just with your example code

Error

Uncaught Error: useBlocker must be used within a data router

Code:

<ReactRouterPrompt when>
  {({ isActive, onConfirm, onCancel }) => (
    <Modal show={isActive}>
      <div>
        <p>Do you really want to leave?</p>
        <button onClick={onCancel}>Cancel</button>
        <button onClick={onConfirm}>Ok</button>
      </div>
    </Modal>
  )}
</ReactRouterPrompt>

Libs:

    "react-router-dom": "^6.14.2",
    "react-router-prompt": "^0.5.4",

resetConfirmation is always undefined

Hey,
this bit of code seems to do nothing.

react-router-prompt/src/hooks/use-confirm.ts

Lines 63 to 65 in 525a4ed

 const resetConfirmation = useCallback(() => { 

 () => setConfirm(initialConfirmState); 

 }, []);

Callback passed to useCallback returns nothing, so resetConfirmation is always undefined

`react-router-dom` load fails in Yarn berry.

error logs

RROR in ../../.yarn/__virtual__/react-router-prompt-virtual-bfafd500e5/0/cache/react-router-prompt-npm-0.3.0-14a024efe7-66dd019f29.zip/node_modules/react-router-prompt/dist/react-router-prompt.cjs.development.js 9:21-48
Module not found: Error: Can't resolve 'react-router-dom' in '/.yarn/__virtual__/react-router-prompt-virtual-bfafd500e5/0/cache/react-router-prompt-npm-0.3.0-14a024efe7-66dd019f29.zip/node_modules/react-router-prompt/dist'

The solution is to add react-router-dom to peer dependency.

Source Map Loading Errors

Hey there, im getting some errors with respect to this module. im not sure if it's related to the version of react-router im using:

react-router-dom: ^6.3.0

Failed to parse source map from '/src/node_modules/react-router-prompt/src/hooks/use-blocker.ts' file: Error: ENOENT: no such file or directory, open '/src/node_modules/react-router-prompt/src/hooks/use-blocker.ts'

Failed to parse source map from '/src/node_modules/react-router-prompt/src/hooks/use-confirm.ts' file: Error: ENOENT: no such file or directory, open '/src/node_modules/react-router-prompt/src/hooks/use-confirm.ts'

Failed to parse source map from '/src/node_modules/react-router-prompt/src/index.tsx' file: Error: ENOENT: no such file or directory, open '/src/node_modules/react-router-prompt/src/index.tsx'

Looking at the folder structure in node_modules it looks like maybe the files are not present in the module:

No longer compatible with react-router

react-router v6.19 removed the unstable_ prefix from useBlocker, which breaks this library.

It should be updated along with the various out of date dependencies if it's still maintained.

Thank you

Go Back and Go Forward browser actions do not work, stuck on Prompt.

When the ReactRouterPrompt is active and you try to Go Back or Go Forward the prompt will show but onConfirm doesn't continue the browser navigation. The user just stays stuck on the prompt.

Attempted to test commit 7c64c7d on #17 but found the same issue occurs.

Bug?: `isActive` is always true when child function is called

As the title states, the isActive parameter is always true when the function gets called and when isActive should be false the function is just not called at all. I am assuming this is a bug since why would the parameter exist otherwise and this prevents alternate rendering and logic for when isActive should be false.

package version: 0.5.2
react-router-dom: 6.8.2

Incompatible invocation of BlockerFunction

As part of 6a1dc67a20c14c3d5952f8252519ada413c82eb6 the following change has been introduced:

        if (
          (typeof when === "boolean" && when === true) ||
          // @ts-ignore Reload case -- No location present
          (typeof when === "function" && when())
        ) {

Calling when without any arguments is not compatible with

  export declare type BlockerFunction = (args: {
    currentLocation: Location;
    nextLocation: Location;
    historyAction: HistoryAction;
}) => boolean;

Currently, this manifests as the following on page reload for me:

formactionbuttonblock.tsx:60 Uncaught TypeError: Cannot destructure property 'nextLocation' of 'undefined' as it is undefined.
    at when (:3000/src/components/formactionbuttonblock.tsx:32:21)
    at :3000/node_modules/.vite/deps/react-router-prompt.js?v=d73664e4:644:35

has error

ModuleNotFoundError
Could not find module in path: 'react-dom/client' relative to '/src/index.js'

	const resetConfirmation = useCallback(() => {
	() => setConfirm(initialConfirmState);
	}, []);