Security News
NVD Quietly Sweeps 100K+ CVEs Into a “Deferred” Black Hole
NVD now marks all pre-2018 CVEs as "Deferred," signaling it will no longer enrich older vulnerabilities, further eroding trust in its data.
By Sarah Gooding - Apr 04, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@what3words/javascript-components
Advanced tools
@what3words/javascript-components
The what3words javascript components package extends the [JS API](https://github.com/what3words/w3w-node-wrapper) and builds custom web components for use in static HTML documents, [Angular](https://angularjs.com), [ReactJS](https://reactjs.com), and [Vue
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.
Vite
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
import { defineConfig } from "vite";
export default defineConfig({
...
optimizeDeps: {
exclude: ["@what3words/javascript-components"],
},
});
Usage
What3Words Autosuggest Component
Configuration
Script Parameters
When using the CDN to load this package, you can provide query string parameters to the <script> tag to pass the following query string parameters to the script loader once it is running:
key=<API_KEY>This will provide the API Key to the SDK in the<script>callback=<NAME>This will provide a callback name for the SDK to call once the script loads. You should attach this function to the global window for this to actually call your script.baseUrl=<URL>The base url to pass to the SDK to call autosuggest endpoint at. (Useful for mocking in tests or pointing to a different environment.)headers=<STRINGIFIED_JSON>You can set headers that the SDK will pass to the backend autosuggest API when making requests against the API. (This is useful for tracking purposes or providing specialised agents, for example)
Navigating to http://localhost:8080?key=API_KEY&callback=NAME&baseUrl=URL&headers={"custom-header":"foo"} will set the above script tag parameters.
Component Attributes
Component attributes can also be passed using script parameters. To pass attributes key/value pairs to the autosuggest component you can pass the attribute name prefixed with the component attribute prefix. The prefix defaults to comp_ so if, for example you wanted to add the initial-value attribute to the component, you would provide the query paramter comp_initial-value=<INITIAL_VALUE>. You can change the prefix using the query parameter:
componentPrefix=<PREFX>(default iscomp_) This will change the prefix for any component attributes.comp_<ATTRIBUTE>=<VALUE>This will set the attribute<ATTRIBUTE>on the autosuggest component with value<VALUE>. (This assumes that the prefix has not been changed otherwise you should changecomp_for the<PREFIX>you set it to.)
Custom HTML Input
If you want to have a custom HTML input being wrapped around by the <what3words-autosuggest /> custom component tag, you must first enable this behaviour using the query parameter:
customInput=true
You can also provide attributes to the input similarly to the autosuggest component attributes above by providing the attribute with the inputPrefix prefixing the attribute key/value pair. For example to set the id and name attributes on the custom input you would do provide the query parameters input_id=my-id&input_name=my-form-elem. You can also change the prefix if you wish by providing the following query paramter:
inputPrefix=<PREFIX>(default isinput_) This will change the prefix for any input attributes.input_<ATTRIBUTE>=<VALUE>This will set the attribute<ATTRIBUTE>on the input element with value<VALUE>. (This assumes that the prefix has not been changed otherwise you should changeinput_for the<PREFIX>you set it to.)
:warning: WARN: The custom input only works if you have not disabled the autosuggest component
Disable Autosuggest Component
If you want to disable the Autosuggest component tag, so that the page does not add it at all and just adds the SDK which is accessible via window.what3words then you can provide the following query paramter to disable to the component:
disableAutosuggest=true
Installation
CDN
<head>
<script
type="module"
defer
src="https://cdn.what3words.com/javascript-components@5.0.0/dist/what3words/what3words.esm.js"
></script>
<script
nomodule
defer
src="https://cdn.what3words.com/javascript-components@5.0.0/dist/what3words/what3words.js"
></script>
...
</head>
...
NPM
npm install @what3words/javascript-components@5.0.0
Usage
<body>
<what3words-autosuggest api_key="<W3W-API-KEY>">
<input
id="search-input"
type="text"
placeholder="Find your address"
autocomplete="off"
/>
</what3words-autosuggest>
</body>
What3Words Map Component
Installation
CDN
<head>
<script
type="module"
defer
src="https://cdn.what3words.com/javascript-components@5.0.0/dist/what3words/what3words.esm.js"
></script>
<script
nomodule
defer
src="https://cdn.what3words.com/javascript-components@5.0.0/dist/what3words/what3words.js"
></script>
...
</head>
...
NPM
npm install @what3words/javascript-components@5.0.0
Usage
<head>
...
<style>
html,
body {
margin: 0px;
height: 100%;
}
/* container MUST have defined height and width to visually render the map canvas */
#map-container {
width: 100vw;
height: 100vh;
}
#search-container {
margin: 10px 0 0 10px;
}
#search-input {
width: 300px;
}
#current-location-container {
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<what3words-map
id="w3w-map"
api_key="<W3W-API-KEY>"
map_api_key="<GOOGLE-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"
>
<div slot="map" id="map-container"></div>
<div slot="search-control" id="search-container">
<what3words-autosuggest>
<input
id="search-input"
type="text"
placeholder="Find your address"
autocomplete="off"
/>
</what3words-autosuggest>
</div>
<div slot="current-location-control" id="current-location-container">
<button>Current Location</button>
</div>
</what3words-map>
</body>
What3Words Notes Component
Installation
CDN
<head>
<script
type="module"
defer
src="https://cdn.what3words.com/javascript-components@5.0.0/dist/what3words/what3words.esm.js"
></script>
<script
nomodule
defer
src="https://cdn.what3words.com/javascript-components@5.0.0/dist/what3words/what3words.js"
></script>
...
</head>
...
NPM
npm install @what3words/javascript-components@5.0.0
Usage
Input Slot - Text Area Element
<body>
<what3words-notes api-key="<W3W-API-KEY>">
<label slot="label" for="delivery-notes">Delivery Notes</label>
<textarea
slot="input"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
></textarea>
</what3words-notes>
</body>
Input Slot - Input Element
<what3words-notes api-key="<YOUR-API-KEY>">
<label slot="label" for="delivery-notes">Delivery Notes</label>
<input
slot="input"
type="text"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
autocomplete="off"
/>
</what3words-notes>
Tooltip Slot
<body>
<what3words-notes api-key="<W3W-API-KEY>">
<label slot="label" for="delivery-notes">Delivery Notes</label>
<textarea
slot="input"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
autocomplete="off"
></textarea>
<div slot="tooltip">
<h3>Did you know?</h3>
<p>
You can add a
<a
href="https://delivery.w3w.co"
target="_blank"
rel="noopener noreferrer"
>
what3words
</a>
address to help our delivery partners find you first time
<br />
e.g. ///limit.boom.field
</p>
</div>
</what3words-notes>
</body>
Last Updated: 3/5/2025
Version: 5.0.0
FAQs
The what3words javascript components package extends the [JS API](https://github.com/what3words/w3w-node-wrapper) and builds custom web components for use in static HTML documents, [Angular](https://angularjs.com), [ReactJS](https://reactjs.com), and [Vue
We found that @what3words/javascript-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 05 Mar 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Lazarus Expands Malicious npm Campaign: 11 New Packages Add Malware Loaders and Bitbucket Payloads
Lazarus-linked threat actors expand their npm malware campaign with new RAT loaders, hex obfuscation, and over 5,600 downloads across 11 packages.
By Kirill Boychenko - Apr 04, 2025
Security News
Safari 18.4 Ships 3 New JavaScript Features from the TC39 Pipeline
Safari 18.4 adds support for Iterator Helpers and two other TC39 JavaScript features, bringing full cross-browser coverage to key parts of the ECMAScript spec.
By Sarah Gooding - Apr 03, 2025