Skip to content
Replace native `confirm` function with yer modals.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
storybook
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
package.json
preview.jpg
readme.md
webpack.config.js

readme.md

Preview

React Confirm npm version Build Status

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
You can’t perform that action at this time.