# @reclaimprotocol/reclaim-connect-react

> ## Integrate Reclaim Connect in Your Front End Reclaim Connect exposes a set of React components that can be integrated into your front end application. It is available as an NPM package. To install it, run the following command in your project directory:

Latest version **0.0.1-beta.14** (published 2024-01-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install @reclaimprotocol/reclaim-connect-react
pnpm add @reclaimprotocol/reclaim-connect-react
yarn add @reclaimprotocol/reclaim-connect-react
bun add @reclaimprotocol/reclaim-connect-react
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-beta.14 |
| Published | 2024-01-27 |
| First published | 2023-11-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 89.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | reclaimprotocol |

## Links

- npm: https://www.npmjs.com/package/@reclaimprotocol/reclaim-connect-react
- npm.io page: https://npm.io/package/@reclaimprotocol/reclaim-connect-react

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-modal](https://npm.io/package/react-modal.md) ^3.16.1
- [react-qr-code](https://npm.io/package/react-qr-code.md) ^2.0.12
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.11
- [@reclaimprotocol/reclaim-client-sdk](https://npm.io/package/@reclaimprotocol/reclaim-client-sdk.md) ^0.0.12

## Recent versions

- 0.0.1-beta.14 (latest) — 2024-01-27
- 0.0.1-beta.12 — 2023-11-16
- 0.0.1-beta.11 — 2023-11-09
- 0.0.1-beta.10 — 2023-11-08

## README

# Reclaim Connect
## Overview

## Integrate Reclaim Connect in Your Front End
Reclaim Connect exposes a set of React components that can be integrated into your front end application. It is available as an NPM package. To install it, run the following command in your project directory:

```bash copy showLineNumbers
npm install @reclaimprotocol/reclaim-connect-react
```

### GenerateProof Component
The GenerateProof component enables you to request data from users. It renders a button that, when clicked, opens a modal with a QR code. Users can scan the QR code with the Reclaim mobile app to submit the requested data. The component also provides a callback function that you can use to execute logic when the proof is successfully submitted.

To use the GenerateProof component, follow these steps:

1. Import the component into your React application:

```tsx
import { GenerateProof } from '@reclaimprotocol/reclaim-connect-react';
```

2. Add the component to your application's JSX:

```tsx
<GenerateProof
  appID='6d6c04eb-237b-4599-8797-94d48b0ac612'
  userID='dasq2easdase-asdq2e3'
  onProofSubmission={() => {}}
  onProofSubmissionFailed={() => {}}
/>
```

3. Update the `applicationId` with your own application Id. You can get one by registering your application with Reclaim. Visit [Reclaim Developer Portal](https://dev.reclaimprotocol.org/applications) for more information.

---
_Source: https://npm.io/package/@reclaimprotocol/reclaim-connect-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._