What3words Javascript Components

The what3words javascript components package extends the JS API and builds custom web components for use in static HTML documents, Angular, ReactJS, and Vue.

Bundler Support

Some bundlers require additional configuration to work with our components.

$3

When using vite, make sure to exclude @what3words/javascript-components from the dependency optimization using the optimizeDeps.exclude option in your vite.config.[js,ts] file

``js
import { defineConfig } from "vite";

export default defineConfig({
...
optimizeDeps: {
exclude: ["@what3words/javascript-components"],
},
});
`

Usage

$3

#### Configuration

##### Script Parameters

When using the CDN to load this package, you can provide query string parameters to the
nomodule
defer
src="https://cdn.what3words.com/javascript-components@5.0.5/dist/what3words/what3words.js"
>
...

...
`

##### NPM

`bash
npm install @what3words/javascript-components@5.0.5
`

#### Usage

`html


id="search-input"
type="text"
placeholder="Find your address"
autocomplete="off"
/>


`

$3

#### Installation

##### CDN

`html

type="module"
defer
src="https://cdn.what3words.com/javascript-components@5.0.5/dist/what3words/what3words.esm.js"
>
nomodule
defer
src="https://cdn.what3words.com/javascript-components@5.0.5/dist/what3words/what3words.js"
>
...

...
`

##### NPM

`bash
npm install @what3words/javascript-components@5.0.5
`

#### Usage

`html

...



id="w3w-map"
api_key=""
map_api_key=""
disable_default_ui
fullscreen_control
map_type_control
zoom_control
current_location_control_position="9"
fullscreen_control_position="3"
search_control_position="2"
words="filled.count.soap"
>


`html

type="module"
defer
src="https://cdn.what3words.com/javascript-components@5.0.5/dist/what3words/what3words.esm.js"
>
nomodule
defer
src="https://cdn.what3words.com/javascript-components@5.0.5/dist/what3words/what3words.js"
>
...

...
`

##### NPM

`bash
npm install @what3words/javascript-components@5.0.5
`

#### Usage

##### Input Slot - Text Area Element

`html


Delivery Notes
slot="input"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
>


`

##### Input Slot - Input Element

`html

Delivery Notes
slot="input"
type="text"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
autocomplete="off"
/>

`

##### Tooltip Slot

`html


Delivery Notes
slot="input"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
autocomplete="off"
>


##### Last Updated: 03/11/2025

##### Version: 5.0.5