https://github.com/ozluy/react-puzzle-confirm

React confirm modal, by matching puzzle piece
https://github.com/ozluy/react-puzzle-confirm

confirm confirm-dialog modal modal-dialog puzzle react

Last synced: about 2 months ago
JSON representation

React confirm modal, by matching puzzle piece

• Host: GitHub
• URL: https://github.com/ozluy/react-puzzle-confirm
• Owner: ozluy
• Created: 2019-09-21T21:57:03.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-15T23:37:02.000Z (over 5 years ago)
• Last Synced: 2025-08-11T22:56:01.681Z (2 months ago)
• Topics: confirm, confirm-dialog, modal, modal-dialog, puzzle, react
• Language: CSS
• Homepage: https://codesandbox.io/s/react-puzzle-confirm-fsdcf
• Size: 1.46 MB
• Stars: 14
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Puzzle Confirm

[![npm version](https://badge.fury.io/js/react-puzzle-confirm.svg)](https://badge.fury.io/js/react-puzzle-confirm)

![npm download](https://img.shields.io/npm/dt/react-puzzle-confirm.svg)

Posted on [React Status](https://react.statuscode.com/issues/157) 🔥🔥🔥

# dependencies

```json

 "react": "^16.9.0",

 "react-dom": "^16.9.0"

```



```

```

 Demo 

 Code Sandbox 

# install

Install as a node module

`npm i react-puzzle-confirm -S`

# usage

```jsx

import React from 'react'

import ReactPuzzleConfirm from 'react-puzzle-confirm'

import 'react-puzzle-confirm/react-puzzle-confirm.css'

const Demo = () => (

   setShowModal(false)}

     onSuccess={() => setShowModal(false)}

     onFail={() => console.log("failed")}

     title="Please fit the puzzle piece carefully"

     sliderTitle="Slide to complete the puzzle"

     failMessage="Failed"

     successMessage="Success"

     closeButtonLabel="Close"

     refrefButtonLabel="Refresh"

     disableRefreshIdleState={true}

  />

)

export default Demo

```

# props

#### onSuccess `function`

default `() => console.log('success')`

function for successful attempt

#### onFail `function`

default `() => console.log('fail')`

function for failed attempt

#### onClose `function`

default `() => console.log('close clicked')`

function for close button click

### title `string`

default `"Please fit the puzzle piece carefully"`

###    sliderTitle `string`

default `"Slide to complete the puzzle"`

###    failMessage `string`

default`"Error"`

###    successMessage `string`

default`"Success"`

###    closeButtonLabel `string`

default`"Close"`

###    refrefButtonLabel `string`

default `"Refresh"`

###    disableRefreshIdleState `boolean`

default `true`

 important note

===

For older versions of React  15.0.0 and above (^15.0.0) please install following version with tag `react-v15.0.0` or `1.0.16`

 

 `npm install react-puzzle-confirm@react-v15.0.0 -S`

 or 

`npm install react-puzzle-confirm@1.0.16 -S`

 

Thanks

Yusuf Özlü