React Confirm

Replace native confirm function with yer modals.

View demo. View examples.

Why?

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.

How It Works

This library uses the render props pattern. You can read more about it here.

Installation

npm install @srph/react-confirm --save

Script tags

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).

Usage

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;

Hooks

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 })
      })
  }
}

Custom options

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.

API Documentation

Here's a list of props you may use to customize the component for your use-case:

confirm(<mixed> opts)

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

ConfirmRoot

Prop	Type	Description
children	function	This is where you render whatever based on the state of ConfirmRoot

children({active, text, options, actions})

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

Setup

You can check the demo, or build it yourself locally:

npm install
npm run start

Afterwards, open up localhost:9001 in your browser.

Bundling package

npm run bundle

Publish storybook

npm run storybook:publish