# React

### Installation

You can install the `@faceki/react-kyc-sdk` package using npm or yarn:

```
npm install @faceki/react-kyc-sdk
# or
yarn add @faceki/react-kyc-sdk
```

### Usage

To use the `<FacekiSDK>` component in your React application, follow these steps:

1. Import the component at the top of your component file:

```
import React from "react";
import FacekiSDK from "@faceki/react-kyc-sdk";
```

2. Configure the SDK by providing the necessary props:

```
const App = () => {
  const sdkConfig = {
    link="your-generated-link",
    theme: {
      mainColor: "#FF5733",
      secondaryColor: "#2ECC71",
      backgroundColor: "#F4F4F4",
      cardBackgroundColor: "#FFFFFF",
      headingTextColor: "#333333",
      secondaryTextColor: "#777777",
      secondaryBorderColor: "#DDDDDD",
      iconFillColor: "#555555",
      iconBorderColor: "#888888",
      iconTextColor: "#FFFFFF",
      logo: "https://example.com/logo.png",
      disableGuidance: false,
      failedText: "Operation failed. Please try again.",
      successText: "Operation successful!",
      buttonbg: "#F8B427",
      textBg: "#EFEFEF",
      verificationProcessingText: "Processing verification...",
    },
    onSuccess: (data) => {
      console.log("SDK operation successful:", data);
    },
    onFail: (data) => {
      console.error("SDK operation failed:", data);
    },
  };

  return <FacekiSDK {...sdkConfig} />;
};

export default App;
```

### Configurable Props

The `<FacekiSDK>` component accepts the following configurable props:

* `link` (required): Your generated link Id from <https://docs.faceki.com/api-integration/verification-apis/generate-kyc-link>

```
{
    "responseCode": 0,
    "data": "LINKID",  // This Value will be used here
    "url": "Verification URL"
}
```

* `theme` (optional): An object to customize the visual appearance of the SDK. It includes properties like `mainColor`, `secondaryColor`, etc.
* `onSuccess` (optional): A callback function to be called when the SDK operation is successful. It receives data as a parameter.
* `onFail` (optional): A callback function to be called when the SDK operation fails. It receives data as a parameter.

#### Theme Configuration

The `theme` object can be customized with the following properties:

* `mainColor`: Main color used in the theme.
* `secondaryColor`: Secondary color for the theme.
* `backgroundColor`: Background color of the SDK component.
* `cardBackgroundColor`: Background color of cards within the SDK.
* `headingTextColor`: Color of text used in headings.
* `secondaryTextColor`: Color of secondary text.
* `secondaryBorderColor`: Color of secondary borders.
* `iconFillColor`: Fill color for icons.
* `iconBorderColor`: Border color for icons.
* `iconTextColor`: Color of text within icons.
* `logo`: URL for a custom logo image.
* `disableGuidance`: A boolean to disable guidance (if applicable).
* `failedText`: Text to display on failure.
* `successText`: Text to display on success.
* `buttonbg`: Background color for buttons.
* `textBg`: Background color for text elements.
* `verificationProcessingText`: Text to display during verification processing.

### Example

Here's an example of how you can use the `<FacekiSDK>` component with minimal configuration:

```
<FacekiSDK link="your-generated-link" />
```

For advanced customization, you can provide additional theme properties and callback functions as needed.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kycdocv2.faceki.com/web-sdk/react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.