Replace native confirm
function with yer modals.
This library was built to be flexible:
- It doesn't assume markup, styling, or template.
- It only provides the bare minimum so you could build your custom
confirm
.
This library uses the render props pattern. You can read more about it here.
npm install @srph/react-confirm --save
If you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.
<!-- Script tags for React and other libraries -->
<script src="https://unpkg.com/@srph/react-confirm/dist/react-confirm.min.js"></script>
This library is exposed as ReactConfirm
(e.g., ReactConfirm.confirm
and ReactConfirm.ConfirmRoot
).
ConfirmRoot
must be placed on your top-most component (aka root component).
import React from 'react'
import {confirm, ConfirmRoot} from '@srph/react-confirm'
import Modal from './Modal'
class App extends React.Component {
render() {
return (
<div>
<ConfirmRoot>
{({active, text, actions}) => (
<Modal isOpen={active} onRequestClose={actions.dismiss}>
{text}
<button onClick={actions.proceed}>Proceed</button>
<button onClick={actions.dismiss}>Dismiss</button>
</Modal>
)}
</ConfirmRoot>
<button onClick={this.handleClick}>
Open Confirmation
</button>
</div>
)
}
handleClick() {
confirm(`You haven't finished your post yet. Do you want to leave without finishing?`)
.then(() => {
console.log('Proceed')
}, () => {
console.log('Dismissed')
})
}
}
export default App;
In 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.
import React from 'react'
import {confirm} from '@srph/react-confirm'
import MyModal from './MyModal'
class App extends React.Component {
state = {
confirming: false
}
render() {
return (
<div>
<MyModal enableEscapeClose={this.state.confirming}>
// ...
<button onClick={this.handleClick}>
Submit Form
</button>
</MyModal>
</div>
)
}
handleClick() {
this.setState({ confirming: true })
confirm(`You haven't finished your post yet. Do you want to leave without finishing?`)
.then(() => {
this.setState({ confirming: false })
}, () => {
this.setState({ confirming: false })
})
}
}
If 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.
import React from 'react'
import {confirm} from '@srph/react-confirm'
import MyModal from './MyModal'
class CustomTitle extends React.Component {
render() {
return (
<div>
<ConfirmRoot>
{({active, text, actions, options}) => (
<Modal isOpen={active} onRequestClose={actions.dismiss}>
{options.title || 'Confirmation'}
<button className="button" onClick={actions.dismiss}>Dismiss</button>
{options.buttons && options.buttons.map((button, i) =>
<button className="button" onClick={button.onClick}>{button.text}</button>
)}
<button className="button -primary" onClick={actions.proceed}>Proceed</button>
</Modal>
)}
</ConfirmRoot>
<button className="button" onClick={this.handleClick}>
Open Confirmation
</button>
</div>
)
}
handleClick() {
confirm({
title: 'Leave page?',
text:`You haven't finished your post yet. Do you want to leave without finishing?`,
buttons: [{
text: 'Say something cool',
onClick() {
console.log('something cool')
}
}]
}).then(() => {
console.log('Proceed')
}, () => {
console.log('Dismissed')
})
}
}
This is kept flexible as everything is up to you.
View examples.
Here's a list of props you may use to customize the component for your use-case:
Parameter | Type | Description |
---|---|---|
opts | string |
Trigger the confirmation with the provided string. Shortcut for confirm({ text: str }) |
opts | object |
Trigger the confirmation with custom settings. All properties except opts.text is mapped to options in children |
opts.text | string |
Text to be displayed |
Prop | Type | Description |
---|---|---|
children | function |
This is where you render whatever based on the state of ConfirmRoot |
Prop | Type | Description |
---|---|---|
active | boolean |
If a confirmation is active |
text | string |
Text to be displayed |
options | object |
All properties passed to confirm except text is accessible here |
actions | object |
|
actions.proceed | object |
Proceed event handler |
actions.dismiss | object |
Dismiss event handler |
You can check the demo, or build it yourself locally:
npm install
npm run start
Afterwards, open up localhost:9001
in your browser.
npm run bundle
npm run storybook:publish