@citizenshipper/widgets
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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:

  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

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"
  1. 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>

Readme

Keywords

none

Package Sidebar

Install

npm i @citizenshipper/widgets

Weekly Downloads

0

Version

1.0.3

License

UNLICENSED

Unpacked Size

1.56 MB

Total Files

8

Last publish

Collaborators

  • imluker
  • branko-cs
  • moljac024