npm package: @supersymmetrysoftware/slider-captcha-react
Description: User-friendly puzzle slider captcha for React
Latest version: 1.1.5

# @supersymmetrysoftware/slider-captcha-react

Generate a puzzle slider captcha and display it with a React component.

This package is a **fork** of [@adrsch/slider-captcha](https://github.com/adrsch/slider-captcha). **All credit** goes to the original author for their excellent work. This fork aims to maintain and enhance the project while preserving its core functionality.

![](https://raw.githubusercontent.com/adrsch/slider-captcha/master/demo.gif)

## Installation

To install the package, run:

```sh
npm install @supersymmetrysoftware/slider-captcha-react
```

## Usage

The component now supports an optional `expiry` prop (in seconds). Regardless of the captcha's verification status, a timer will automatically reset the captcha after the specified time. In addition, the component exposes a `reset` method via a ref for manual resets.

### Basic Usage

```jsx
import React from "react";
import SliderCaptcha from "@supersymmetrysoftware/slider-captcha-react";

function verifiedCallback(token) {
  console.log("Captcha token: " + token);
}

function App() {
  return (
    <SliderCaptcha
      create="https://example.com/captcha/create"
      verify="https://example.com/captcha/verify"
      callback={verifiedCallback}
      expiry={10} // Automatically resets 10 seconds after creation
    />
  );
}

export default App;
```

### Using the Reset Method with a Ref

```jsx
import React, { useRef } from "react";
import SliderCaptcha from "@supersymmetrysoftware/slider-captcha-react";

function verifiedCallback(token) {
  console.log("Captcha token: " + token);
}

function App() {
  const captchaRef = useRef();

  const handleReset = () => {
    if (captchaRef.current) {
      captchaRef.current.reset();
    }
  };

  return (
    <div>
      <SliderCaptcha
        ref={captchaRef}
        create="https://example.com/captcha/create"
        verify="https://example.com/captcha/verify"
        callback={verifiedCallback}
        expiry={10} // Automatically resets 10 seconds after creation
      />
      <button onClick={handleReset}>Reset Captcha</button>
    </div>
  );
}

export default App;
```

## React Component Props

| Name     | Type                                  | Default                                                             | Description                                                                                                                                       |
| :------- | ------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| callback | func                                  | `(token) => console.log(token)`                                     | Called with token on successful verification                                                                                                      |
| create   | string or func                        | `captcha/create`                                                    | Either the URL to fetch data from or a `function ()` returning a promise which resolves with `{ background, slider }` as PNG buffers              |
| verify   | string or func                        | `captcha/verify`                                                    | Either the URL to fetch data from or a `function (response, trail)` returning a promise which resolves with `{ result, token }`                   |
| text     | { anchor: string, challenge: string } | `{ anchor: 'I am human', challenge: 'Slide to finish the puzzle' }` | Text used for captcha                                                                                                                             |
| variant  | string                                | `light`                                                             | Use `'light'` for light theme, `'dark'` for dark theme                                                                                            |
| expiry   | number                                | `0`                                                                 | Expiry time in seconds after which the captcha will automatically reset, regardless of its verification status. Set to `0` to disable auto-reset. |

Light:

![](https://raw.githubusercontent.com/adrsch/slider-captcha/master/light.png)

Dark:

![](https://raw.githubusercontent.com/adrsch/slider-captcha/master/dark.png)

---

## Credits

This package is based on the original work by [@adrsch](https://github.com/adrsch/slider-captcha). If you find this package useful, consider checking out the [original repository](https://github.com/adrsch/slider-captcha) and giving it a star. 🙌

Maintained by **SupersymmetrySoftware** to ensure continued updates and improvements.