# 3. QuadrataReact Package

## `<QuadrataReact /> Component`&#x20;

<pre class="language-tsx"><code class="lang-tsx">import {
    QuadAttribute,
<strong>    QuadClientEnvironment,
</strong>    QuadrataReact,
    QuadrataReactConfigShared,
    QuadrataReactConfigUser 
} from '@quadrata/quadrata-react';

let configShared: QuadrataReactConfigShared = {
    _debug: false,                                // When true, debug information will be printed in the console.
    accessToken: undefined,                       // JWT access token
    apiUrl: 'https://prod.quadrata.com/api/v1',   // Quadrata endpoint to be used for implementation.     
    children: undefined,                          // Component to override the default loading component
    className: 'custom_class',                    // The class name to be appended to the component's root DOM element.
    contactEmail: 'your_email@email.com',         // Contact email address
    darkMode: false,                              // Toggle between dark and light mode
    discordUrl: 'https://discord.gg/SR5Fc6BK',    // Discord link URL
    error: undefined,                             // Generic error text, when defined, an error message will appear at the bottom of the UI.
    environment: QuadClientEnvironment.SANDBOX,   // Integration environment to use.
    protocolName: 'Example Inc.',                 // Your protocol name
    showSocialButtons: false,                     // Show or hide the social media share buttons on the `mint complete` page.
};

let configUser: QuadrataReactConfigUser = {
    ...configShared,
    account: '',                                  // Wallet address of the user to onboard
    attributes: [] as QuadAttribute[],            // An array of Quadrata attributes required by the protocol.
    bypassMint: boolean                           // Optional boolean to allow bypass minting the Quadrata Passport
    countriesUnavailable: undefined,              // Array of country codes that make the onboarding process unavailable.
    mintComplete: false,                          // Upon a successful mint, pass a true value to this prop to display the final page.
    mintError: string,                            // Optional error message to be displayed in the MINT_STATUS view
    privacyScopes: undefined,                     // An array of Quadrata Privacy Scope attributes that can be requested from the users' PII.
    signature: '',                                // The user's signature of the `Welcome to Quadrata! By signing, you agree to the Terms of Service.`
    signatureConsent: '',                         // The user's signature when granting access to PII data.
    transactionHash: '',                          // The mint transaction hash.
};

const MyComponent = () => {
<strong>  &#x3C;QuadrataReact
</strong>      configBusiness={configShared}             // Configuration for KYB onboarding
      configUser={configUser}                   // Configuration for KYC onboarding
      onApplicationEnd={handleOnApplicationEnd} // Optional call function: triggered when the onboarding reaches an end state.
      onHide={handleHide}                       // Optional callback function: triggered when the modal is closed
      onMintClick={handleMintClick}             // Callback function: triggered when a user clicks "Claim Passport"
      onMintParamsReady={handleMintParamsReady} // Optional callback function: triggered when the mint parameters are signed and ready to mint
      onPageChange={handlePageChange}           // Optional callback function: triggers when a page changes
      onSign={handleSign}                       // Callback function: triggered when a user attemps to Sign Wallet or Allow Consent
  >
      Loading...
  &#x3C;/QuadrataReact>
}
</code></pre>

## `<QuadrataReact />` Props

<table><thead><tr><th width="220">Prop</th><th width="344.33652928735216">Description</th><th>Type</th></tr></thead><tbody><tr><td><code>configBusiness</code> (optional)</td><td><code>ConfigBusiness</code> interface defines the required properties for the kyb onboarding flow.</td><td><pre class="language-typescript"><code class="lang-typescript">QuadrataReactConfigBusiness
</code></pre></td></tr><tr><td><p><code>configUser</code></p><p>(optional)</p></td><td><code>ConfigUser</code> interface defines the required properties for the kyc onboarding flow.</td><td><pre class="language-typescript"><code class="lang-typescript">QuadrataReactConfigUser
</code></pre></td></tr><tr><td><code>onApplicationEnd</code>(optional)</td><td>A callback function: triggered when the application has reached an end state.</td><td><p><code>QuadrataOnApplicationEndCallback</code><br></p><p>Individual Passport Onboarding Statuses:<br>- <code>READY</code><br>- <code>IN_REVIEW</code><br>- <code>MINTED</code><br><br>Business Passport Onboarding Statuses:<br>- <code>APPROVED</code><br>- <code>DENIED</code><br>- <code>INITIALIZED</code><br>- <code>IN_REVIEW</code></p></td></tr><tr><td><code>onHide</code> (optional)</td><td>A callback function: triggered when the modal is closed.</td><td></td></tr><tr><td><code>onMintClick</code> (required)</td><td>A callback function. triggered when a user clicks <strong>Claim</strong> <strong>Passport</strong>. the event object passed to this function will contain all the data required to mint a passport. <br><code>event.params</code> <code>event.signature</code> and <code>event.signatureIssuer</code> should be passed to the <code>QuadPassport.setAttributesBulk()</code> function in the correct order, and include the <code>event.params.fee</code> as the value passed to the overrides of the <code>setAttributes</code> function. see the example below.</td><td><code>QuadClientMintClickEventHandler</code></td></tr><tr><td><code>onMintParamsReady</code><br>(optional)</td><td>A callback function: triggered when the mint parameters are signed and ready. <br><br><em>tip: useful in case the UI needs to prepare the transaction before initiating it, see example page.</em></td><td><code>QuadClientMintParamsReadyCallback</code></td></tr><tr><td><code>onPageChange</code> (optional)</td><td><p>A callback function: triggered when a page is changed. Passes a Page type string<em>.</em></p><p></p><p><em>tip: Import the <code>Page</code> type from the <code>@quadrata/client-react</code> library</em></p></td><td><code>(page: Page) => void</code></td></tr><tr><td><p><code>onSign</code></p><p>(required)</p></td><td>A callback function. triggered when a user clicks <strong>Sign Wallet</strong> or <strong>Allow</strong>. It passes a message for the user to sign in the <em>Onboarding</em> and/or <em>User Consent</em> flow.</td><td><code>(message: string, isConsent: boolean) => void</code></td></tr></tbody></table>

## Shared Configuration Object

`QuadrataReact` component accepts `configUser` and `configBusines` props to configure corresponding onboarding flows. It is required to set one of the props to launch the appropriate onboarding flow. If both props are set, the onboarding selection screen is displayed.

<table><thead><tr><th width="220">Prop</th><th width="344.33652928735216">Description</th><th>Type</th></tr></thead><tbody><tr><td><code>_debug</code> (optional)</td><td>When true, debug information will be printed in the console. <strong>Never use in production.</strong></td><td><code>boolean</code></td></tr><tr><td><code>accessToken</code> (required)</td><td>JWT access token. <br><br>See "<a href="../individual-passport-onboarding/2.-api-authentication">API Authentication</a>" page</td><td><code>string</code></td></tr><tr><td><p><code>apiUrl</code></p><p>(required)</p></td><td>Quadrata endpoint to be used for implementation.</td><td><p><code>string</code><br></p><ul><li><code>testing</code> - <a href="https://int.quadrata.com/api/v1">https://int.quadrata.com/api/v1</a></li><li><code>production</code> - <a href="https://prod.quadrata.com/api/v1">https://prod.quadrata.com/api/v1</a></li></ul></td></tr><tr><td><code>children</code> (optional)</td><td>Overrides the default loader component inside of the form markup. This component will be shown in all loading states during the flow. if not defined, a "Loading..." text will be shown instead.</td><td><code>React.ReactNode</code></td></tr><tr><td><code>className</code> (optional)</td><td>The class name to be appended to the component's root DOM element.</td><td><code>string</code></td></tr><tr><td><code>contactEmail</code> (optional)</td><td>The <code>contactEmail</code> prop assigns an email address to all support email instances in the client.</td><td><p><code>string</code></p><ul><li><code>default</code> - <a href="mailto:support@quadrata.com">support@quadrata.com</a></li></ul></td></tr><tr><td><code>darkMode</code> (optional)</td><td><p>Toggle between dark and light mode.</p><p></p><p>Default: <em>false</em></p></td><td><code>boolean</code></td></tr><tr><td><code>discordUrl</code> (optional)</td><td>The <code>discordUrl</code> prop accepts a <code>string</code> value expected to be a link to a Discord server and will be displayed in all instances where a Discord link is displayed in the client.</td><td><p><code>string</code></p><ul><li><code>default</code> - Quadrata Discord server</li></ul></td></tr><tr><td><p><code>error</code></p><p>(optional)</p></td><td>Generic error text, when defined, an error message will appear at the bottom of the UI.</td><td><code>string | undefined</code></td></tr><tr><td><code>environment</code> (optional)</td><td>The <code>environment</code> prop controls the environment with which the client communicates. Never set the <code>environment</code> to <code>QuadClientEnvironment.SANDBOX</code> in production.</td><td><p><code>QuadClientEnvironment</code><br></p><ul><li><code>QuadClientEnvironment.SANDBOX</code> - <code>https://int.quadrata.com/api/v1</code></li><li><code>QuadClientEnvironment.PRODUCTION</code> - <code>https://prod.quadrata.com/api/v1</code></li><li><code>default</code> - <code>QuadClientEnvironment.SANDBOX</code></li></ul></td></tr><tr><td><code>protocolName</code> (required)</td><td>The <code>protocolName</code> prop accepts a <code>string</code> value for your protocol, dApp, or company name.<br><br>The <code>protocolName</code> should match the name assigned for your company at Quadrata.</td><td><code>string</code></td></tr><tr><td><code>showSocialButtons</code> (optional)</td><td>The <code>showSocialButtons</code> prop accepts a <code>boolean</code> value to display or not display social share buttons. Social share buttons are displayed on the <code>mint completed</code> page after a user or business has successfully onboarded.</td><td><code>string | undefined</code></td></tr></tbody></table>

## Business Configuration Object

`ConfigBusiness` interface defines the required properties for the `kyb` onboarding flow. The `ConfigBusiness` interface has no additional options than the `ConfigShared` interface.

{% hint style="warning" %}
Always define your configuration object outside of your React components to prevent unexpected behavior
{% endhint %}

## User Configuration Object

`ConfigUser` interface defines the required properties for the `kyc` onboarding flow.

<table><thead><tr><th width="220">Prop</th><th width="344.33652928735216">Description</th><th>Type</th></tr></thead><tbody><tr><td><p><code>account</code></p><p>(required)</p></td><td>The user's wallet address.</td><td><code>string</code></td></tr><tr><td><code>attributes</code> (required)</td><td>An array of Quadrata attributes required by the protocol. <br><br>See "<a href="broken-reference">Discover User Attributes</a>" page.</td><td><code>QuadAttribute[]</code></td></tr><tr><td><p><code>chainId</code></p><p>(required)</p></td><td>The decimal chain ID number of the currently connected network. In case of unsupported chain IDs the user will be navigated to the "Configuration Error" screen. <br><br><em>Tip: Supported chain IDs can be found in the <code>QuadSupportedChainId</code> enum which can be imported from the <code>@quadrata/core-react</code> NPM package.</em></td><td><code>number</code></td></tr><tr><td><code>countriesUnavailable</code><br>(optional)</td><td>An array of ISO country codes where the onboarding process is made unavailable. </td><td><code>string[]</code><br><a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">ISO</a> country codes<br>example: <code>['US', 'CA']</code></td></tr><tr><td><code>mintComplete</code> (required)</td><td>Upon a successful mint, pass a <code>true</code> value to this prop to display the final page.</td><td><code>boolean</code></td></tr><tr><td><p><code>onSign</code></p><p>(required)</p></td><td>A callback function. triggered when a user clicks <strong>Sign Wallet</strong> or <strong>Allow</strong>. It passes a message for the user to sign in the <em>Onboarding</em> and/or <em>User Consent</em> flow.</td><td><code>(message: string, isConsent: boolean) => void</code></td></tr><tr><td><code>privacyScopes</code><br><code>(optional)</code></td><td>An array of Quadrata Privacy Parameter Names that can be requested from the users' privacy data.<br><br>See "<a href="../../request-privacy-data/list-of-privacy-data">List of Privacy Data</a>" page.</td><td><code>PrivacyConsentScopeParam[] | undefined</code></td></tr><tr><td><code>signature</code> (required)</td><td>The user's signature of the "<em>Welcome to Quadrata! By signing, you agree to the Terms of Service.</em>" message passed by the <code>onSign</code> prop. </td><td><code>string | undefined</code></td></tr><tr><td><code>signatureConsent</code><br><code>(optional)</code></td><td>The user's signature when granting access to privacy data.</td><td><code>string | undefined</code></td></tr><tr><td><code>transactionHash</code> (required)</td><td>The mint transaction hash. If the value is not undefined,  it will trigger navigation to the "Mint in progress" page and will generate the Block explorer transaction link URL.</td><td><code>string | undefined</code></td></tr></tbody></table>