Skip to content

ideal-postcodes/postcode-lookup-bundled

Repository files navigation

Ideal Postcodes Postcode Lookup Bundle

JavaScript browser bundles for the Postcode Lookup library

CI Cross Browser Testing

npm version jscdn Release npm bundle size

This package exports polyfilled, minified copies of postcode-lookup in various formats available on npm and various JavaScript cdns. It can be readily dropped in on a page without transpilation of postcode-lookup.

If you intend to incorporate the browser client in your own bundle, please use postcode-lookup as your package.json dependency.

Download

Download Latest Bundle

Serving your own versioned copy is recommended. If a JavaScript CDN is used (e.g. jsDelivr, cdnjs), be sure to pin the version.

Use postcode-lookup.esm.js if you need a ES Module compatible build.

⚠️ Pinning Versions

It is important you pin your bundle version in production. Pulling directly from latest will cause your integration to fail at some point in the future.

For instance, follow the instructions on jsdelivr.com/postcode-lookup-bundled to pin a specific version in production. E.g.

<script
  src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/[email protected]/dist/postcode-lookup.js">
</script>

Links

Documentation

Bundles Overview

postcode-lookup.js

  • UMD compatible
  • Transpiles postcode-lookup to target IE11 as minimum browser version
  • Default export of the npm module

postcode-lookup.esm.js

  • ES Module compatible
  • Targets browsers with ES Module support
  • Default ES Module export

Usage

UMD

<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/[email protected]/dist/postcode-lookup.min.js"></script>

<script>
  IdealPostcodes.PostcodeLookup.setup({
    apiKey: "iddqd",
    context: "#postcode_lookup_field",
    outputFields: {
      line_1: "#line_1",
      line_2: "#line_2",
      line_3: "#line_3",
      post_town: "#post_town",
      postcode: "#postcode",
    },
  });
</script>

ES Module

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled@2/dist/postcode-lookup.esm.js"></script>

<script type="module">
  import { PostcodeLookup } from "https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled@2/dist/postcode-lookup.min.js";
  PostcodeLookup.setup({
    apiKey: "iddqd",
    context: "#postcode_lookup_field",
    outputFields: {
      line_1: "#line_1",
      line_2: "#line_2",
      line_3: "#line_3",
      post_town: "#post_town",
      postcode: "#postcode",
    },
  });
</script>

Client Documentation

This package is a transpiled copy of ideal-postcodes/postcode-lookup.

For a complete list of client methods, including low level resource methods, please see the postcode-lookup documentation

Run Examples

Build, and serve example pages locally:

npm run build && \ # Build JS bundles
npm start          # Start http server

For UMD demo visit http://localhost:8081/example/umd.html

For ES module demo visit http://localhost:8081/example/esm.html