# Use with React

Follow the steps below to integrate the Widget in any generic React application.

Heads up!

Using Create React App? Check out the Use with Create React App guide.

Use with Create React App

../usewithcra/

# Integration steps

Step 1 Add the Widget package to your project with:

yarn add @kycdao/widget

npm install @kycdao/widget

If you're using webpack 5 or later you'll need to add the crypto module to your webpack config, as webpack 5 no longer polyfills it by default.

Need help choosing your integration type (Iframe vs Component) fits best? Check out our Usage matrix.

Step 2 Import the Widget Iframe client.

import {KycDaoIframeClient} from "@kycdao/widget"

Step 3 Create an Iframe client instance and open it conditionally.

const iframeClient = new KycDaoIframeClient({
    parent: '#modalroot',
    iframeOptions: {
        url: "https://sdk.kycdao.xyz/iframe.html",
        messageTargetOrigin: window.origin,
    },
    config: {
        demoMode: true,
        enabledBlockchainNetworks: ["PolygonMumbai"],
        enabledVerificationTypes: ["KYC"],
        evmProvider: "ethereum",
        baseUrl: "https://staging.kycdao.xyz",
    },
})

function Iframe() {
    return (
        <>
            <button onClick={() => iframeClient.open()}>
                Open modal
            </button>

            <div id="modalroot" />
        </>
    )
}

Step 2 Import the Widget and its styles.

import {KycDaoWidget} from "@kycdao/widget"

Step 3 Create a Widget widget instance and render it.

function Component() {
    const [widgetOpen, setWidgetOpen] = useState(false)

    return (
        <div>
            <button onClick={() => setWidgetOpen(true)}>
                Open modal
            </button>

            {widgetOpen && (
                <KycDaoWidget
                    onSuccess={(tx_url) => console.log(tx_url)}
                    onFail={(err) => console.error(err)}
                    config={{
                        baseUrl: "https://staging.kycdao.xyz",
                        enabledVerificationTypes: ["KYC"],
                        enabledBlockchainNetworks: ["PolygonMumbai"],
                        evmProvider: 'ethereum',
                    }}
                />
            )}
        </div>
    )
}

Success!

You're all set! You can now use the Widget in your application.

# Configuration options

For details on the SDK configuration, see: Configuration options

# Full examples

If you're looking for full examples, check out the Integration examples page.