Skip to content

placekit/examples

Repository files navigation

PlaceKit implementation examples

Implementation examples for most common stacks and use-cases

Installing and running examples

# clone project and access this example
git clone git@github.com:placekit/examples.git placekit-examples
cd placekit-examples

# install dependencies
npm install

# create .env file
cp .env .env.local

Open the .env.local file and replace <your-api-key> with a PlaceKit API key.

Reminder: never commit an API key.

Then run:

npm run dev -w=<example-dir-name>

replacing <example-dir-name> with the directory name of the example you want to try.

Examples index

Description Environment
Auto-fill form with address autocomplete vanilla
Basic address autocomplete vanilla
Basic address autocomplete cdn, vanilla
Global city search vanilla
Countries search vanilla
Address autocomplete with countries whitelist vanilla
Address autocomplete with user's geolocation vanilla
Address search on map with Leaflet leaflet, vanilla
Svelte autocomplete component svelte
Address autocomplete with user's geolocation typescript, vanilla
Vue autocomplete component vue
Auto-fill form with address autocomplete react
Basic address autocomplete react
Global city search react
Countries search react
Address autocomplete with countries whitelist react
Address search on map with Leaflet leaflet, react
Auto-fill form with address autocomplete in React Hook Form react
Auto-fill form with address autocomplete react, typescript
Custom address autocomplete with Algolia Autocomplete vanilla
Custom address autocomplete with HeadlessUI React react
Custom address autocomplete with HeadlessUI Vue vue
Simple address search request node, vanilla
Simple address search request with ESM node, vanilla
Address search Express API route express, node
Simple address search request node, typescript

Notes

  • We're only using TailwindCSS as a convenience for the basic styling of the examples.
  • To turn on dark mode on autocomplete, add .dark class or data-theme="dark" to <body> in any autocomplete example.