@pylonlending/react-elements v1.1.14

To install, you can add the Pylon Elements library to your project like so:

npm install @pylonlending/react-elements --save

Setting up the Loan Application component

// Import the Loan Application component
import { LoanApplicationComponent } from "@pylonlending/react-elements";

// Create a function that returns a Promise<AuthLease>, which should
// fetch the results of the auth handler you setup earlier. The response of the
// auth handler should always be JSON.
// (See https://docs.dev.braidlending.com/api-reference/handling-auth
//  for the prerequisite auth handshake work that needs to be configured
//  prior to building Pylon components into your app)
const fetchPylonAuthLease = async (): Promise<AuthLease> => {
  const response = await fetch("/auth/pylon");
  return response.json();
};

<YourApplication>
  <LoanApplicationComponent
    // Include your customer ID given to you by Pylon
    customerId="example-customer-id"
    // Include your function that returns a Promise<AuthLease>
    authLeaseCallback={fetchPylonAuthLease}
  />
</YourApplication>;

Setting up the Borrower Dashboard component

// Import the Borrower Dashboard component
import { BorrowerDashboardComponent } from "@pylonlending/react-elements";

// Create a function that returns a Promise<AuthLease>, which should
// fetch the results of the auth handler you setup earlier. The response of the
// auth handler should always be JSON.
// (See https://docs.pylonlending.com/api-reference/handling-auth
//  for the prerequisite auth handshake work that needs to be configured
//  prior to building Pylon components into your app)
const fetchPylonAuthLease = async (): Promise<AuthLease> => {
  const response = await fetch("/auth/pylon");
  return response.json();
};

<YourApplication>
  <YourApplicationHeader />
  <BorrowerDashboardComponent
    // Include your customer ID given to you by Pylon
    customerId="example-customer-id"
    // Include your function that returns a Promise<AuthLease>
    authLeaseCallback={fetchPylonAuthLease}
    // Load this loan's dashboard
    loanId="12345"
  />
</YourApplication>;