{"id":26460003,"url":"https://github.com/xjkit/react-goodbye","last_synced_at":"2025-03-19T02:47:59.921Z","repository":{"id":37735122,"uuid":"129629949","full_name":"xJkit/react-goodbye","owner":"xJkit","description":"A save reminder component for react router","archived":false,"fork":false,"pushed_at":"2022-12-28T10:23:23.000Z","size":1139,"stargazers_count":120,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:07:59.885Z","etag":null,"topics":["goodbye","higher-order-component","react","react-goodbye","react-router-v4","reminder","reminder-component","render-props","router-provider","save-reminder"],"latest_commit_sha":null,"homepage":"https://xJkit.github.io/react-goodbye","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xJkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-15T16:40:00.000Z","updated_at":"2024-02-23T19:00:40.000Z","dependencies_parsed_at":"2023-01-31T06:15:56.745Z","dependency_job_id":null,"html_url":"https://github.com/xJkit/react-goodbye","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xJkit%2Freact-goodbye","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xJkit%2Freact-goodbye/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xJkit%2Freact-goodbye/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xJkit%2Freact-goodbye/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xJkit","download_url":"https://codeload.github.com/xJkit/react-goodbye/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244345095,"owners_count":20438241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["goodbye","higher-order-component","react","react-goodbye","react-router-v4","reminder","reminder-component","render-props","router-provider","save-reminder"],"created_at":"2025-03-19T02:47:59.178Z","updated_at":"2025-03-19T02:47:59.913Z","avatar_url":"https://github.com/xJkit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React GoodBye\n\u003e A save reminder component for react router v4.\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-goodbye\"\u003e\n    \u003cimg\n      alt=\"npm version\"\n      src=\"https://img.shields.io/npm/v/react-goodbye.svg\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/xJkit/react-goodbye/tree/master\"\u003e\n    \u003cimg\n      alt=\"circle ci\"\n      src=\"https://circleci.com/gh/xJkit/react-goodbye/tree/master.svg?style=shield\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/xJkit/react-goodbye?branch=master\"\u003e\n    \u003cimg\n      alt=\"coverage\"\n      src=\"https://coveralls.io/repos/github/xJkit/react-goodbye/badge.svg?branch=master\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"\bhttps://github.com/xJkit/react-goodbye/blob/master/LICENSE\"\u003e\n    \u003cimg\n      alt=\"license mit\"\n      src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nreact-goodbye is a save reminder utility to prevent routing transition before you leave without saving changes.\n\n**Please check the [demo](https://xJkit.github.io/react-goodbye) page for more information.**\n\n## Install\n\n[![NPM](https://nodei.co/npm/react-goodbye.png)](https://nodei.co/npm/react-goodbye/)\n\n```bash\nnpm install --save react-goodbye\n```\n\nor you can use **yarn**:\n\n```bash\nyarn add react-goodbye\n```\n\n\u003e note: react-goodbye uses React 16.3 new context api under the hood. Therefore, only React v16.3+ are supported.\n\n## Usage\n\n* Decorate your router provider from react-router using `withGoodBye`:\n\n```jsx\nimport { BrowserRouter } from 'react-router-dom';\nimport { withGoodBye } from 'react-goodbye';\n\nconst EnhancedRouter = withGoodBye(BrowserRouter);\n\nReactDOM.render(\n  \u003cEnhancedRouter\u003e\n    \u003cApp /\u003e\n  \u003c/EnhancedRouter\u003e,\n  document.getElementById('root')\n);\n```\n\n* Import `GoodBye` component under the page you want with save reminder:\n\n```jsx\nimport React from 'react';\nimport GoodBye from 'react-goodbye';\n\nimport Modal from './path/to/your/modal/component';\n\nclass Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      initialValue: props.initialValue,\n      currentValue: props.initialValue\n    };\n  }\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cGoodBye when={this.state.initialValue !== this.state.currentValue}\u003e\n          {({ isShow, handleOk, handleCancel }) =\u003e\n            isShow \u0026\u0026 (\n              \u003cModal\u003e\n                \u003ch3\u003eSettings Changed\u003c/h3\u003e\n                \u003cp\u003e\n                  You change the page without saving any data. Do you want to\n                  leave?\n                \u003c/p\u003e\n                \u003cbutton onClick={handleOk}\u003eYes\u003c/button\u003e\n                \u003cbutton onClick={handleCancel}\u003eNo\u003c/button\u003e\n              \u003c/Modal\u003e\n            )\n          }\n        \u003c/GoodBye\u003e\n        \u003cinput\n          type=\"input\"\n          value={this.state.currentValue}\n          onChange={evt =\u003e this.setState({ currentValue: evt.target.value })}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n\n## API Reference\n\n* [withGoodBye](#withgoodbye)\n* [Provider](#provider)\n* [GoodBye](#goodbye)\n\n### withGoodBye\n\n`withGoodBye` uses **higher order component** pattern to inject the **getUserConfirmation** handle function prop on the react-router provider. Use this HoC to decorate the router providers like `BrowserRouter`, `HashRouter` or low-level `Router`:\n\n```jsx\nimport { withGoodBye } from 'react-goodbye';\nimport { Router } from 'react-router';\n\nconst EnhancedRouter = withGoodBye(Router);\n\nReactDom.render(\n  \u003cEnhancedRouter\u003e\n    \u003cApp /\u003e\n  \u003c/EnhancedRouter\u003e\n);\n```\n\n### Provider\n\nIf you prefer **render props** pattern, you can use this `Provider` component like so:\n\n```jsx\nimport { Provider as GoodByeProvider } from 'react-goodbye';\nimport { BrowserRouter } from 'react-router-dom';\n\nReactDom.render(\n  \u003cGoodByeProvider\u003e\n    {({ handleGetUserConfirm }) =\u003e (\n      \u003cBrowserRouter getUserConfirmation={handleGetUserConfirm}\u003e\n        \u003cApp /\u003e\n      \u003c/BrowserRouter\u003e\n    )}\n  \u003c/GoodByeProvider\u003e\n);\n```\n\n### GoodBye\n\n`GoodBye` is the consumer component of the GoodBye context. This component must be in the subtree of `Provider` or decorated router provider.\n\n| props             | type    | default | description                                                                                                                                                                                                                     |\n|-------------------|---------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| when              | Boolean | false   | Make render props `isShow` to be true or false when routing transition occurs.                                                                                                                                                  |\n| alertBeforeUnload | Boolean | false   | Turn on the browser alert. Technically, when you **refresh** or **close** browser window, only browser itself can detect and popup alert for you. If you want to remind the user when doing actions above, turn on this option. |\n| alertMessage      | String  | ''      | Custom browser alert messages. Note that this option only works for **IE**.                                                                                                                                                     |\n| conditionalPrompt | func    |         | Custom callback to show the prompt conditionally based on the location. The function receives the location and you can return true to allow the transition or false to show the prompt.                                         |\n\n\n**react-goodbye** will handle all of the code logic for you. Use provided `render props` to show whatever you want (modal, lightbox, dialog, popup, etc)\n\n| render props | type     | default | description                                                                                                                     |\n|--------------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------|\n| isShow       | Boolean  | false   | While `when` prop is true, `isShow` will be true when routing transition occurs. You can put your dialog component here.        |\n| handleOk     | function |         | Allow routing transition and make `isShow` to be **false** again.                                                               |\n| handleCancel | function |         | Block routing transition and make `isShow` to be **false** again.                                                               |\n| handlePass         | function |         | Low-level api under `handleOk` and `handleCancel`; pass **true** or **false** will allow/block routing transitions. Use this function to do your additional actions. |\n\n## License\n\nMIT © [xJkit](https://github.com/xJkit)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxjkit%2Freact-goodbye","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxjkit%2Freact-goodbye","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxjkit%2Freact-goodbye/lists"}