{"id":16978690,"url":"https://github.com/srph/react-confirm","last_synced_at":"2026-05-16T08:43:45.052Z","repository":{"id":57162189,"uuid":"79357323","full_name":"srph/react-confirm","owner":"srph","description":"Replace native `confirm` function with yer modals.","archived":false,"fork":false,"pushed_at":"2018-02-26T13:30:10.000Z","size":48,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-11T10:53:26.218Z","etag":null,"topics":["confirm","decorator","react","render-props"],"latest_commit_sha":null,"homepage":"https://barber-solders-33074.netlify.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srph.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-18T16:05:47.000Z","updated_at":"2019-10-25T06:10:18.000Z","dependencies_parsed_at":"2022-09-10T02:33:18.387Z","dependency_job_id":null,"html_url":"https://github.com/srph/react-confirm","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/srph/react-confirm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-confirm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-confirm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-confirm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-confirm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srph","download_url":"https://codeload.github.com/srph/react-confirm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-confirm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264951727,"owners_count":23687983,"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":["confirm","decorator","react","render-props"],"created_at":"2024-10-14T01:44:01.258Z","updated_at":"2026-05-16T08:43:44.997Z","avatar_url":"https://github.com/srph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"text-align: center\"\u003e\n  \u003cimg src=\"preview.jpg\" alt=\"Preview\"\u003e\n\u003c/div\u003e\n\n# React Confirm [![npm version](https://img.shields.io/npm/v/@srph/react-confirm.svg?style=flat-square)](https://npmjs.com/packages/@srph/react-confirm) [![Build Status](https://img.shields.io/travis/srph/react-confirm.svg?style=flat-square)](https://travis-ci.org/srph/react-confirm?branch=master)\nReplace native `confirm` function with yer modals.\n\nView [demo](https://barber-solders-33074.netlify.com/). View [examples](storybook/confirm.js).\n\n## Why?\nThis library was built to be flexible:\n\n- It doesn't assume markup, styling, or template.\n- It only provides the bare minimum so you could build your custom `confirm`.\n\n## How It Works\nThis library uses the render props pattern. You can read more about it [here](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).\n\n## Installation\n```bash\nnpm install @srph/react-confirm --save\n```\n\n### Script tags\nIf you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.\n\n```html\n\u003c!-- Script tags for React and other libraries --\u003e\n\u003cscript src=\"https://unpkg.com/@srph/react-confirm/dist/react-confirm.min.js\"\u003e\u003c/script\u003e\n```\n\nThis library is exposed as `ReactConfirm` (e.g., `ReactConfirm.confirm` and `ReactConfirm.ConfirmRoot`).\n\n## Usage\n`ConfirmRoot` must be placed on your top-most component (aka root component).\n\n```js\nimport React from 'react'\nimport {confirm, ConfirmRoot} from '@srph/react-confirm'\nimport Modal from './Modal'\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cConfirmRoot\u003e\n          {({active, text, actions}) =\u003e (\n            \u003cModal isOpen={active} onRequestClose={actions.dismiss}\u003e\n              {text}\n              \u003cbutton onClick={actions.proceed}\u003eProceed\u003c/button\u003e\n              \u003cbutton onClick={actions.dismiss}\u003eDismiss\u003c/button\u003e\n            \u003c/Modal\u003e\n          )}\n        \u003c/ConfirmRoot\u003e\n\n        \u003cbutton onClick={this.handleClick}\u003e\n          Open Confirmation\n        \u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  handleClick() {\n    confirm(`You haven't finished your post yet. Do you want to leave without finishing?`)\n      .then(() =\u003e {\n        console.log('Proceed')\n      }, () =\u003e {\n        console.log('Dismissed')\n      })\n  }\n}\n\nexport default App;\n```\n\n### Hooks\nIn case you need to check if we're confirming, like for instance, we don't want our modal to be closed when `escape` is pressed.\n\n```js\nimport React from 'react'\nimport {confirm} from '@srph/react-confirm'\nimport MyModal from './MyModal'\n\nclass App extends React.Component {\n  state = {\n    confirming: false\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cMyModal enableEscapeClose={this.state.confirming}\u003e\n          // ...\n          \u003cbutton onClick={this.handleClick}\u003e\n            Submit Form\n          \u003c/button\u003e\n        \u003c/MyModal\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  handleClick() {\n    this.setState({ confirming: true })\n\n    confirm(`You haven't finished your post yet. Do you want to leave without finishing?`)\n      .then(() =\u003e {\n        this.setState({ confirming: false })\n      }, () =\u003e {\n        this.setState({ confirming: false })\n      })\n  }\n}\n```\n\n### Custom options\nIf you want to pass any kind of other options, anything you pass to `confirm(opts)` except `text` is available through the render props' `options`. In the example below, we're allowing custom titles and extra actions / buttons.\n\n```js\nimport React from 'react'\nimport {confirm} from '@srph/react-confirm'\nimport MyModal from './MyModal'\n\nclass CustomTitle extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cConfirmRoot\u003e\n          {({active, text, actions, options}) =\u003e (\n            \u003cModal isOpen={active} onRequestClose={actions.dismiss}\u003e\n              {options.title || 'Confirmation'}\n\n              \u003cbutton className=\"button\" onClick={actions.dismiss}\u003eDismiss\u003c/button\u003e\n\n              {options.buttons \u0026\u0026 options.buttons.map((button, i) =\u003e\n                \u003cbutton className=\"button\" onClick={button.onClick}\u003e{button.text}\u003c/button\u003e\n              )}\n\n              \u003cbutton className=\"button -primary\" onClick={actions.proceed}\u003eProceed\u003c/button\u003e\n            \u003c/Modal\u003e\n          )}\n        \u003c/ConfirmRoot\u003e\n\n        \u003cbutton className=\"button\" onClick={this.handleClick}\u003e\n          Open Confirmation\n        \u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  handleClick() {\n    confirm({\n      title: 'Leave page?',\n      text:`You haven't finished your post yet. Do you want to leave without finishing?`,\n      buttons: [{\n        text: 'Say something cool',\n        onClick() {\n          console.log('something cool')\n        }\n      }]\n    }).then(() =\u003e {\n      console.log('Proceed')\n    }, () =\u003e {\n      console.log('Dismissed')\n    })\n  }\n}\n```\n\nThis is kept flexible as everything is up to you.\n\nView [examples](storybook/confirm.js).\n\n## API Documentation\nHere's a list of props you may use to customize the component for your use-case:\n\n### `confirm(\u003cmixed\u003e opts)`\n\n| Parameter  | Type | Description |\n| ----- | ---- | ----------- |\n| opts | `string` | Trigger the confirmation with the provided string. Shortcut for `confirm({ text: str })` |\n| opts | `object` | Trigger the confirmation with custom settings. All properties except `opts.text` is mapped to `options` in `children` |\n| opts.text | `string` | Text to be displayed |\n\n### ConfirmRoot\n\n| Prop  | Type | Description |\n| ----- | ---- | ----------- |\n| children | `function` | This is where you render whatever based on the state of `ConfirmRoot` |\n\n#### `children({active, text, options, actions})`\n\n| Prop  | Type | Description |\n| ----- | ---- | ----------- |\n| active | `boolean` | If a confirmation is active |\n| text | `string` | Text to be displayed |\n| options | `object` | All properties passed to `confirm` except `text` is accessible here |\n| actions | `object` | |\n| actions.proceed | `object` | Proceed event handler |\n| actions.dismiss | `object` | Dismiss event handler |\n\n## Setup\nYou can check the [demo](https://barber-solders-33074.netlify.com/), or build it yourself locally:\n\n```bash\nnpm install\nnpm run start\n```\n\nAfterwards, open up `localhost:9001` in your browser.\n\n### Bundling package\n```\nnpm run bundle\n```\n\n### Publish storybook\n```\nnpm run storybook:publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrph%2Freact-confirm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrph%2Freact-confirm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrph%2Freact-confirm/lists"}