@citizenshipper/widgets

Installation

This module is distributed via npm and should be installed as one of your project's dependencies:

npm install @citizenshipper/widgets

Or include the script directly into your html
``

`

Usage

Widget can be used in two ways:

1. As a module import like:

`
import { renderDogPriceEstimateWidget } from "@citizenshipper/widgets"

const dog = {
name: "Remy",
breed: "Australian Shepherd",
};

const pickupAddress = {
city: "Dallas",
stateCode: "TX",
lat: 32.779167,
lng: -96.808891,
zipCode: "75001" // can be optional,
};

const root = document.getElementById("cs-widget")

const apiKey = "YOUR_API_KEY"

function main() {
renderDogPriceEstimateWidget({
root,
dog,
pickupAddress,
apiKey
})
}
`

> Inside your html template you need to create div element with an id of cs-widget

$3

| Prop | Type | Required | Description
| ----------- | ----------- | ----------- | -----------
| root | HTMLEelement | true | html element reference where widget will be instantiated |
| dog | object | true | dog related data like name and breed
| pickupAddress | object | true | address related data like city, state code, lat, lng and zip code. Zip code is optional
| apiKey | string | true | google api key

#### root
Type: HTMLElement, required: true

#### dog
Type: object, required: true

`
const dog = {
name: "Remy",
breed: "Australian Shepherd",
}
`

#### pickupAddress
Type: object, required: true

`
const pickupAddress = {
city: "Dallas",
stateCode: "TX",
lat: 32.779167,
lng: -96.808891,
zipCode: "75001",
}
`

#### apiKey
Type: string, required: true
`
const apiKey = "AIzaSyC1qY_rest_of_the_key"
`

2. As a standalone package

> Element of type div with an id of cs-widget must be present

`


















``