react-slide-captcha
1.Usage
(1) Installation
npm i -S react-slide-captcha
(2) require
1. react
2. react-dom
(3) simple example
import SlideCaptcha from 'react-slide-captcha';
import 'react-slide-captcha/dist/styles.css';
<SlideCaptcha
puzzleUrl={this.state.puzzleUrl}
bgUrl={this.state.bgUrl}
onRequest={this.resultCallback}
containerClassName="test"
/>
2 Live Demo
(1) Desktop Demo
[Desktop Demo]
(2) Mobile Demo
3 API （2.x）
| Properties | Descrition | Type | Default |
|---|---|---|---|
| puzzleUrl | URL for puzzlei mage（required） | string | - |
| bgUrl | URL for background image（required） | string | - |
| onRequest | requeset callback（required） | (validateValue: number, validatedSuccess: any, validatedFail?: any) => void | - |
| slidedImage | element for slided（optional） | JSX.Element | ‘defalut svg’ |
| slidedImageMoving | moving element for slided（optional） | JSX.Element | ‘default moving svg’ |
| slidedImageSuccess | success element for slided（optional） | JSX.Element | ‘default success svg’ |
| slidedImageError | error element for slided（optional） | JSX.Element | ‘defalut default error svg’ |
| containerClassName | container class（optional） | any | - |
| style | container style（optional） | object | - |
| tipsText | text for tips（optional） | string | - |
| tipsClassName | tips class（optional） | any | - |
| tipsStyle | tips style（optional） | object | - |
| robotValidate | robot validate config（optional） | object: { offsetY: number, handler: () => any,} | - |
| reset | component reset type auto/manual （optional） | string | auto |
| resetButton | component reset type none/inline/outline（optional） | JSX.Element | ‘auto’ |
| resetButtonElement | component reset type（optional） | string | default button svg |
| onReset | reset call back（optional） | () => any | - |
| imagePosition | bg image position type top/bottom （optional） | string | ‘bottom’ |
| isLoading | loading status（optional） | boolean | false |
| loadingIcon | loading icon（optional） | JSX.Element | defalut loading svg |
| displayType | display type hover/static（optional） | string | ‘hover’ |
| hoverPanelStyle | hover panel style（optional） | object | - |
| hoverPanelClassName | hover panel className（optional） | string | - |
4 License
This entire project are built based on MIT license
MIT
Slide Captcha
by Roxyhuang
188
Project Details
- Roxyhuang/react-slide-captcha
- MIT License
- Last Updated: 1/5/2025
Recomended MCP Servers
🧩
Inoyu Apache Unomi MCP Server
An implementation of Anthropic's Model Context Protocol for the Apache Unomi CDP
🧩
mcp-server-cloudbrowser
🧩
MCP-Geo
Geocoding MCP server with GeoPY!
🧩
DeepWriter MCP Server
MCP to allow LLMs to submit jobs to Deepwriter AI
Freshservice Integration Server
MCP server created for Freshservice, allowing AI models to interact with Freshservice modules
🧩
grpcmcp
MCP Server for gRPC
Linear Issues Server
Simple MCP server providing AI assistants read-only access to Linear issues via API tokens
UseGrant Server
MCP server for usegrant
Minimal Addition Tool Server
mcp-add-server
Neon API Integration Server
Lightweight MCP server to give your Cursor Agent access to the Neon API
Next.js Blog Starter
A blog starter project for a NextJS blog using Obsidian as the CMS
Discord Relay
Featured Templates
View More
