React confirm modal, by matching puzzle piece
Posted on React Status 🔥🔥🔥
"react": "^16.9.0",
"react-dom": "^16.9.0"
<ReactPuzzleConfirm />
Demo
Code Sandbox
Install as a node module
npm i react-puzzle-confirm -S
import React from 'react'
import ReactPuzzleConfirm from 'react-puzzle-confirm'
import 'react-puzzle-confirm/react-puzzle-confirm.css'
const Demo = () => (
<ReactPuzzleConfirm
onClose={() => 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
function
default () => console.log('success')
function for successful attempt
function
default () => console.log('fail')
function for failed attempt
function
default () => console.log('close clicked')
function for close button click
string
default "Please fit the puzzle piece carefully"
string
default "Slide to complete the puzzle"
string
default"Error"
string
default"Success"
string
default"Close"
string
default "Refresh"
boolean
default true
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 [email protected] -S
or
npm install [email protected] -S
Thanks
Yusuf Özlü