{"id":13473719,"url":"https://github.com/djorg83/react-bootstrap-sweetalert","last_synced_at":"2025-04-12T21:19:43.591Z","repository":{"id":57141329,"uuid":"47882345","full_name":"djorg83/react-bootstrap-sweetalert","owner":"djorg83","description":"A React implementation of SweetAlert","archived":false,"fork":false,"pushed_at":"2022-10-18T12:37:40.000Z","size":5597,"stargazers_count":252,"open_issues_count":12,"forks_count":55,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-04T00:09:50.200Z","etag":null,"topics":["alert","bootstrap","confirm","javascript","react","sweetalert","typescript"],"latest_commit_sha":null,"homepage":"https://djorg83.github.io/react-bootstrap-sweetalert/","language":"TypeScript","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/djorg83.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","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":"2015-12-12T15:01:18.000Z","updated_at":"2024-10-01T23:51:32.000Z","dependencies_parsed_at":"2022-09-05T18:31:39.965Z","dependency_job_id":null,"html_url":"https://github.com/djorg83/react-bootstrap-sweetalert","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djorg83%2Freact-bootstrap-sweetalert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djorg83%2Freact-bootstrap-sweetalert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djorg83%2Freact-bootstrap-sweetalert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djorg83%2Freact-bootstrap-sweetalert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djorg83","download_url":"https://codeload.github.com/djorg83/react-bootstrap-sweetalert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262420,"owners_count":21074305,"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":["alert","bootstrap","confirm","javascript","react","sweetalert","typescript"],"created_at":"2024-07-31T16:01:06.224Z","updated_at":"2025-04-12T21:19:43.558Z","avatar_url":"https://github.com/djorg83.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/djorg83"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# react-bootstrap-sweetalert\n\n[![NPM version](http://img.shields.io/npm/v/react-bootstrap-sweetalert.svg)](https://www.npmjs.com/package/react-bootstrap-sweetalert)\n[![Downloads](https://img.shields.io/npm/dm/react-bootstrap-sweetalert.svg)](https://www.npmjs.com/package/react-bootstrap-sweetalert)\n[![David](https://img.shields.io/david/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)\n[![GitHub issues](https://img.shields.io/github/issues/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)\n[![license](https://img.shields.io/github/license/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)\n[![GitHub stars](https://img.shields.io/github/stars/djorg83/react-bootstrap-sweetalert.svg?style=social\u0026label=Star\u0026maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)\n\n[![openbase](https://djorg83.github.io/react-bootstrap-sweetalert/demo/assets/openbase.png) Openbase Dashboard](https://openbase.io/js/react-bootstrap-sweetalert)\n\n[![NPM](https://nodei.co/npm/react-bootstrap-sweetalert.png?downloads=true\u0026stars=true)](https://nodei.co/npm/react-bootstrap-sweetalert/)\n\n# SweetAlert for React/Bootstrap\n\nAn awesome replacement for JavaScript's alert.\n\n----\n\n## Support\n\nIf you think I've done a good job, consider showing your support by buying me a beer.  Cheers! :beers:\n\n[![Buy me a beer](https://djorg83.github.io/react-bootstrap-sweetalert/demo/assets/bmab.png)](https://www.buymeacoffee.com/djorg83)\n\n----\n\n## Demo \u0026 Examples\n\nSee the demo with examples of common use cases and a live editor.\n\n:alien: [TAKE ME TO YOUR DEMO](http://djorg83.github.io/react-bootstrap-sweetalert/) :alien:\n\n![Demo GIF](https://djorg83.github.io/react-bootstrap-sweetalert/demo/assets/demo.gif)\n----\n\n## Getting Started\n\n### Installation\n```\n$ npm i react-bootstrap-sweetalert\n```\n\n\u003e or \n\n```\n$ yarn add react-bootstrap-sweetalert\n```\n\n### Import\n```\nconst SweetAlert = require('react-bootstrap-sweetalert');\n```\n\u003e or \n\n```\nimport SweetAlert from 'react-bootstrap-sweetalert';\n```\n\n----\n\n## Recommended Usage\n\nIt is recommended that you keep an alert in your state, and remove it when the `onConfirm` or `onCancel` callbacks are invoked.\n\nYou can have stackable alerts by keeping an array of alerts in your data store, and always providing the first alert in\nthe array as the visible alert.  When an alert is closed, remove it from the store.\n\nSee [`examples/redux`](https://github.com/djorg83/react-bootstrap-sweetalert/tree/master/examples/redux) for a working example of how to implement stackable alerts with a Redux store.\n\n----\n\n## Tip: Receiving an input value\n\nIf you're using `input` type, the value of the input will be sent to the `onConfirm` callback as the first argument.\n\n``` js\nonConfirm={(response) =\u003e this.onRecieveInput(response)}\n```\n\n## Custom Forms / Using Render Props\n\nIf you want to build an alert that re-renders based on external state changes, or simply want to build a custom form,\nthen you will find the render props pattern to be your best option.\n\n- For re-rendering based on external state changes, use [props.dependencies](#propsdependencies)\n- See the `SweetAlertRenderProps` interface in [types.ts](https://github.com/djorg83/react-bootstrap-sweetalert/blob/master/src/types.ts) for some information on the available render props.\n\n```typescript jsx\n\u003cSweetAlert\n title={\"Uses render props\"}\n onConfirm={this.onConfirm}\n onCancel={this.onCancel}\n dependencies={[this.state.firstName, this.state.lastName]}\n\u003e\n  {(renderProps: SweetAlertRenderProps) =\u003e (\n    \u003cform\u003e\n      Your name is: {this.state.firstName} {this.state.lastName}\n      \u003chr/\u003e\n      \u003cinput\n        type={'text'}\n        ref={renderProps.setAutoFocusInputRef}\n        className=\"form-control\"\n        value={this.state.firstName}\n        onKeyDown={renderProps.onEnterKeyDownConfirm}\n        onChange={(e) =\u003e this.setState({ firstName: e.target.value })}\n        placeholder={'First name'}\n      /\u003e\n      \u003cbr /\u003e\n      \u003cinput\n        type={'text'}\n        className=\"form-control\"\n        value={this.state.lastName}\n        onKeyDown={renderProps.onEnterKeyDownConfirm}\n        onChange={(e) =\u003e this.setState({ lastName: e.target.value })}\n        placeholder={'Last name'}\n      /\u003e\n      \u003chr/\u003e\n    \u003c/form\u003e\n  )}\n\u003c/SweetAlert\u003e\n```\n\n## Changes in version 5.2\n\n* Added `props.dependencies` that re-renders the alert whenever the provided Array of `dependencies` value changes.\n* Added new supported value of `'controlled'` for `props.type`.  If `props.type === 'controlled'` then `props.onConfirm` will return `props.dependencies`.\n* Added support for using a function as your alert content/children, aka render props.\n\nFor more see [CHANGE_LOG.md](https://github.com/djorg83/react-bootstrap-sweetalert/blob/master/CHANGE_LOG.md)\n\n## Props\n\n- [title](#propstitle) (required)\n- [type](#propstype)\n- [onConfirm](#propsonconfirm) (required)\n- [onCancel](#propsoncancel)\n- [customIcon](#propscustomicon)\n- [allowEscape](#propsallowescape)\n- [closeOnClickOutside](#propscloseonclickoutside)\n- [hideOverlay](#propshideoverlay)\n- [timeout](#propstimeout)\n- [show](#propsshow)\n- [dependencies](#propsdependencies)\n\n##### Buttons\n\n- [btnSize](#propsbtnsize)\n- [confirmBtnText](#propsconfirmbtntext)\n- [confirmBtnBsStyle](#propsconfirmbtnbsstyle)\n- [confirmBtnCssClass](#propsconfirmbtncssclass)\n- [confirmBtnStyle](#propsconfirmbtnstyle)\n- [cancelBtnText](#propscancelbtntext)\n- [cancelBtnBsStyle](#propscancelbtnbsstyle)\n- [cancelBtnCssClass](#propscancelbtncssclass)\n- [cancelBtnStyle](#propscancelbtnstyle)\n- [showCloseButton](#propsshowclosebutton)\n- [reverseButtons](#propsreversebuttons)\n- [customButtons](#propscustombuttons)\n- [focusConfirmBtn](#propsfocusconfirmbtn)\n- [focusCancelBtn](#propsfocuscancelbtn)\n- [closeBtnStyle](#propsclosebtnstyle)\n- [showConfirm](#propsshowconfirm)\n- [showCancel](#propsshowcancel)\n- [disabled](#propsdisabled)\n\n##### Input\n\n- [placeholder](#propsplaceholder)\n- [required](#propsrequired)\n- [validationMsg](#propsvalidationmsg)\n- [validationRegex](#propsvalidationregex)\n- [defaultValue](#propsdefaultvalue)\n- [inputType](#propsinputtype)\n\n##### Hooks\n\n- [beforeMount](#propsbeforemount)\n- [afterMount](#propsaftermount)\n- [afterUpdate](#propsafterupdate)\n- [beforeUnmount](#propsbeforeunmount)\n\n##### Styling\n\n- [style](#propsstyle)\n- [customClass](#propscustomclass)\n\n##### Animations\n\n- [openAnim](#propsopenanim)\n- [closeAnim](#propscloseanim)\n\n----\n\n### `props.title`\nThe text to display for the title. JSX/ReactNode allowed.\n- Type: `ReactNode|string`\n- Default: `undefined`\n----\n### `props.onConfirm`\nInvoked when user clicks confirm button. Also invoked if user hits ENTER key.\n- Type: `(response?: any) =\u003e any`\n- Default: `undefined`\n----\n### `props.onCancel`\nInvoked when user clicks cancel button. Also invoked if allowEscape is true and user hits ESCAPE key.\n- Type: `() =\u003e any`\n- Default: `undefined`\n----\n### `props.type`\nThe type of alert to display. \n- Type: `'default'|'info'|'success'|'warning'|'danger'|'error'|'input'|'custom'|'controlled'`\n- Default: `'default'`\n\n\u003e NOTE\n\u003e - If `props.type === 'controlled'` then `props.onConfirm` will receive `props.dependencies` as its first argument.\n\u003e - If `props.type === 'input'` then `props.onConfirm` will receive `props.dependencies` as its first argument.\n----\n### `props.btnSize`\nThe type of alert to display. \n- Type: `'lg'|'sm'|'xs'`\n- Default: `'lg'`\n- Allowed values: `'lg'`, `'sm'`, `'xs'`\n----\n### `props.confirmBtnText`\nContent of confirm button, or JSX/ReactNode.\n- Type: `ReactNode|string`\n- Default: `'OK'`\n----\n### `props.confirmBtnBsStyle`\nBootstrap style of confirm button.\n- Type: `'default'|'primary'|'link'|'info'|'success'|'warning'|'danger'|'secondary'|'outline-{variant}'`\n- Default: `'primary'`\n----\n### `props.confirmBtnCssClass`\nCSS class added to confirm button.\n- Type: `string`\n- Default: `''`\n----\n### `props.confirmBtnStyle`\nInline style added to confirm button.\n- Type: `CSSProperties`\n- Default: `{}`\n----\n### `props.cancelBtnText`\nContent of cancel button, or JSX/ReactNode.\n- Type: `ReactNode|string`\n- Default: `'Cancel'`\n----\n### `props.cancelBtnBsStyle`\nText of cancel button, or JSX/ReactNode.\n- Type: `string`\n- Default: `'link'`\n- Recommended values: `'default'|'primary'|'link'|'info'|'success'|'warning'|'danger'|'secondary'|'outline-{variant}'`\n----\n### `props.cancelBtnCssClass`\nCSS class added to cancel button.\n- Type: `string`\n- Default: `''`\n----\n### `props.cancelBtnStyle`\nInline style added to cancel button.\n- Type: `CSSProperties`\n- Default: `{}`\n----\n### `props.showCloseButton`\nIf set to true, then an X close button will be shown in the top right of the alert.\n\n\u003e NOTE: You must also implement `props.onCancel` in order for this props to work. This is because visibility of the\n\u003e component is controlled externally through either `props.show` or by removing the `\u003cSweetAlert /\u003e` in your render method.\n\n- Type: `boolean`\n- Default: `false`\n----\n### `props.reverseButtons`\nReverses the order of the Confirm and Cancel buttons. Default positioning is [Cancel] [Confirm]\n- Type: `boolean`\n- Default: `false`\n----\n### `props.customButtons`\nCustom buttons to use in place of the default Confirm and Cancel buttons. Can render any JSX/ReactNodes here.\n- Type: `ReactNode`\n- Default: `undefined`\n----\n### `props.customIcon`\nEither a string url for an image to use as the icon, or JSX/ReactNode.\n- Type: `ReactNode|string`\n- Default: `undefined`\n----\n### `props.placeholder`\nIf `props.type` is `'input'`, this is the placeholder for the input field.\n- Type: `string`\n- Default: `undefined`\n----\n### `props.show`\nIf false, the alert will not be rendered.\nWarning: Using this option should be a last resort, and is somewhat of an anti-pattern for this library.\nThe recommended way to control visibility is to only render a `\u003cSweetAlert/\u003e` element when you want one to be displayed,\nand remove it when the `onConfirm` or `onCancel` methods are called.\n- Type: `boolean`\n- Default: `true`\n----\n### `props.dependencies`\nIf you have external state that should trigger your alert to re-render it's content, you can provide an `Array` of `dependencies`.\nWhenever the dependencies are changed, using `===` comparision, the content of the alert will be re-rendered.\n- Type: `any[]`\n- Default: `true`\n\nExample\n```typescript jsx\nconst [firstName, setFirstName] = useState('');\nconst [lastName, setLastName] = useState('');\n\n\u003cSweetAlert dependencies={[firstName, lastName]}\u003e\n  \u003cdiv\u003e\n    \u003ch4\u003eHello {{firstName}} {{lastName}}\u003c/h4\u003e\n    \u003cinput value={firstName} onChange={(e) =\u003e setFirstName(e.target.value)} /\u003e\n    \u003cinput value={lastName} onChange={(e) =\u003e setLastName(e.target.value)} /\u003e\n  \u003c/div\u003e\n\u003c/SweetAlert\u003e\n```\n----\n### `props.focusConfirmBtn`\nIf true the Confirm button will receive focus automatically.  NOTE: Does not apply when `props.type` is `'input'`\n- Type: `boolean`\n- Default: `true`\n----\n### `props.focusCancelBtn`\nIf true the Cancel button will receive focus automatically.  NOTE: Does not apply when `props.type` is `'input'`\n- Type: `boolean`\n- Default: `false`\n----\n### `props.required`\nIf `props.type` is `'input'`, this prop controls whether the input field is required to have a value.\n- Type: `boolean`\n- Default: `true`\n----\n### `props.validationMsg`\nIf `props.type` is `'input'` and `props.required` is `true`, this is the message to display when the user clicks confirm without entering a value.\n- Type: `string`\n- Default: `'Please enter a response!'`\n----\n### `props.validationRegex`\nIf `props.type` is `'input'` and `props.required` is `true`, this Regex is used to validate input value.\n- Type: `RegExp`\n- Default: `/^.+$/`\n----\n### `props.defaultValue`\nIf `props.type` is `'input'`, this is the default value for the input field.\n- Type: `number|string`\n- Default: `undefined`\n----\n### `props.inputType`\nIf `props.type` is `'input'`, this is the default value for the input field.\n- Type: `string`\n- Default: `'text'`\n- Recommended values: `'text'|'password'|'number'|'textarea'`\n----\n### `props.style`\nStyle overrides applied to the sweetalert wrapper.\n- Type: `CSSProperties`\n- Default: `{}`\n----\n### `props.closeBtnStyle`\nStyle overrides applied to the X close button.\n- Type: `CSSProperties`\n- Default: `{}`\n----\n### `props.customClass`\nCustom CSS class applied to the sweetalert wrapper.\n- Type: `string`\n- Default: `''`\n----\n### `props.showConfirm`\nIf `true`, the Confirm button will show.\n- Type: `boolean`\n- Default: `true`\n----\n### `props.showCancel`\nIf `true`, the Cancel button will show.\n- Type: `boolean`\n- Default: `false`\n----\n### `props.allowEscape`\nIf `true`, the `onCancel` function will be invoked when the user hits the `ESCAPE` key.\n- Type: `boolean`\n- Default: `true`\n----\n### `props.closeOnClickOutside`\nIf `true`, the `onCancel` function will be invoked when clicking outside the modal.\n- Type: `boolean`\n- Default: `true`\n----\n### `props.hideOverlay`\nIf `true`, then the modal overlay will not be rendered.\n- Type: `boolean`\n- Default: `false`\n----\n### `props.disabled`\nIf `true`, then the Confirm button will be disabled. (NOTE: This does not effect the `props.allowEscape` behavior.)\nIf you set disabled to `true` but do not provide an `onCancel` function, then the `disabled` property will not be honored.\n- Type: `boolean`\n- Default: `false`\n----\n### `props.beforeMount`\nHook which is invoked at the end of the component `constructor` function.\n- Type: `() =\u003e any`\n- Default: `() =\u003e {}`\n----\n### `props.afterMount`\nHook which is invoked at the end of the `componentDidMount` method.\n- Type: `() =\u003e any`\n- Default: `() =\u003e {}`\n----\n### `props.afterUpdate`\nHook which is invoked at the end of the `componentDidUpdate` method.\n- Type: `() =\u003e any`\n- Default: `() =\u003e {}`\n----\n### `props.beforeUnmount`\nHook which is invoked at the end of the `componentWillUnmount` method.\n- Type: `() =\u003e any`\n- Default: `() =\u003e {}`\n----\n### `props.timeout`\nIf defined, and greater than `0`, `props.onConfirm` will be invoked to close the alert automatically after the specified number of milliseconds.\n- Type: `number`\n- Default: `0`\n----\n### `props.openAnim`\nProvide custom show animation or false to have no animation. To specify a custom animation, provide the name of your css animation and duration of the animation in milliseconds.\n- Type: `boolean|SweetAlertAnimationProps`\n- Default: `{ name: 'showSweetAlert', duration: 300 }`\n----\n### `props.closeAnim`\nProvide custom hide animation or false to have no animation. To specify a custom animation, provide the name of your css animation and duration of the animation in milliseconds. For a simple hide animation you can use `{ name: 'hideSweetAlert', duration: 100 }`\n- Type: `boolean|SweetAlertAnimationProps`\n- Default: `false`\n\n## Related projects\n\n* [SweetAlert](https://github.com/t4t5/sweetalert)\n* [SweetAlert for Android](https://github.com/pedant/sweet-alert-dialog)\n* [SweetAlert for Bootstrap](https://github.com/lipis/bootstrap-sweetalert)\n* [SweetAlert for AngularJS](https://github.com/oitozero/ngSweetAlert)\n* [SweetAlert for RubyOnRails](https://github.com/sharshenov/sweetalert-rails)\n\n## Development\n\n``` bash\n$ yarn demo \u0026\u0026 open http://localhost:3000\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjorg83%2Freact-bootstrap-sweetalert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjorg83%2Freact-bootstrap-sweetalert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjorg83%2Freact-bootstrap-sweetalert/lists"}