@citizenshipper/widgets NPM

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

<script src="https://unpkg.com/@citizenshipper/widgets@0.1.3/widgets.umd.js"></script>

Usage

Widget can be used in two ways:

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

Props

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"

As a standalone package

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your project name</title>
  </head>
  <body>
    <div id="cs-widget" data-dog-name="Remy" data-dog-breed="Australian Shephered" data-pickup-state-code="TX" data-pickup-city="Dallas" data-pickup-lat="32.779167" data-pickup-lng="-96.808891" data-pickup-zip="75001" data-api-key="AIzaSyC1qY_rest_of_the_key"></div>
    
    
    <script src="https://unpkg.com/@citizenshipper/widgets@0.1.38/widgets.umd.js" type="text/javascript"></script>
    <script>
      window.addEventListener('DOMContentLoaded', (event) => {
        const initCSWidget = window.citizenshipperWidget.renderDogPriceEstimateWidget;

        initCSWidget()
      });
    </script>
  </body>
</html>

@everything-registry/sub-chunk-174 @infinitebrahmanuniverse/nolb-_cit @zalastax/nolb-_cit

7 months ago

1 year ago

2 years ago

2 years ago

2 years ago