React Blue Check Component

A React component that integrates with Blue Check to verify credentials in a privacy-preserving way.

Installation

npm install @bluecheck/react-library

Or

yarn add @bluecheck/react-library

Usage

import { EmploymentVerification, EmploymentProof } from '@bluecheck/react-library'

const [showVerification, setShowVerification] = useState(true);
const handleProofVerified = (proof: EmploymentProof) => {
    console.log(proof);
}

const handleClose = () => {
    setShowVerification(false);
};

const styles = {
    QRLightColor:"#AB552F",
    QRDarkColor:"#1E1E1E",
    borderHoverColor: '#AB552F',
    backgroundColor: '#1E1E1E',
    borderColor: '#949494',
    textColor: 'white',
    fontType: "Hahmlet",
}

{showVerification && <EmploymentVerification
    appId="app-id"
    onProofVerified={handleProofVerified}
    onClose={handleClose}
    styles={styles}
/>}

Props

| Prop | Type | Description | |------------------|--------------------------------|-------------| | appId | string | Your Reclaim Protocol application ID | | onProofVerified| (proof: Proof) => void | Callback function that receives the verification proof | | onClose | () => void | Optional callback function triggered when the verification process is closed | | styles | { borderHoverColor?: string; backgroundColor?: string; borderColor?: string; textColor?: string; fontType?: string QRLightColor?: string QRDarkColor?: string } | Optional object for customizing component styles |

Usage

import { EcommerceVerification, EcommerceProof } from '@bluecheck/react-library'

const [showVerification, setShowVerification] = useState(true);
  const handleProofVerified = (proof: Proof) => {
    console.log(JSON.parse(proof.userData));
    setProof(proof);
  };

const handleClose = () => {
    setShowVerification(false);
};

const styles = {
    QRLightColor:"#AB552F",
    QRDarkColor:"#1E1E1E",
    borderHoverColor: '#AB552F',
    backgroundColor: '#1E1E1E',
    borderColor: '#949494',
    textColor: 'white',
    fontType: "Hahmlet",
}

{showVerification && <EcommerceVerification
    appId="app-id"
    onProofVerified={handleProofVerified}
    onClose={handleClose}
    styles={styles}
/>}

Props

| Prop | Type | Description | |------------------|--------------------------------|-------------| | appId | string | Your Reclaim Protocol application ID | | onProofVerified| (proof: Proof) => void | Callback function that receives the verification proof | | onClose | () => void | Optional callback function triggered when the verification process is closed | | styles | { borderHoverColor?: string; backgroundColor?: string; borderColor?: string; textColor?: string; fontType?: string QRLightColor?: string QRDarkColor?: string } | Optional object for customizing component styles |

Usage

import { EducationVerification, EducationProof } from '@bluecheck/react-library'

const [showVerification, setShowVerification] = useState(true);
const handleProofVerified = (proof: EducationProof) => {
    console.log(proof);
}

const handleClose = () => {
    setShowVerification(false);
};

const styles = {
    QRLightColor:"#AB552F",
    QRDarkColor:"#1E1E1E",
    borderHoverColor: '#AB552F',
    backgroundColor: '#1E1E1E',
    borderColor: '#949494',
    textColor: 'white',
    fontType: "Hahmlet",
}

{showVerification && <EducationVerification
    appId="app-id"
    onProofVerified={handleProofVerified}
    onClose={handleClose}
    styles={styles}
/>}

Props

| Prop | Type | Description | |------------------|--------------------------------|-------------| | appId | string | Your Reclaim Protocol application ID | | onProofVerified| (proof: Proof) => void | Callback function that receives the verification proof | | onClose | () => void | Optional callback function triggered when the verification process is closed | | styles | { borderHoverColor?: string; backgroundColor?: string; borderColor?: string; textColor?: string; fontType?: string QRLightColor?: string QRDarkColor?: string } | Optional object for customizing component styles |

Proof Types

Employment Proof

  export interface EmploymentProof {
    bluecheck_session_id: string;
    data: Record<string, string | Record<string, unknown>>;
  }

Ecommerce Proof

export interface EcommerceProof {
    userData: string;
    sessionId: string;
}

Education Proof

  export interface EducationProof {
    bluecheck_session_id: string;
    data: Record<string, string | Record<string, unknown>>;
  }