Skip to content

Commit 5646b20

Browse files
noclatnoclat
authored
Fix mouseover not applying active state (#35)
* fix: mouseover by updating autocomplete-js * docs: add countries whitelist example
1 parent bd8941c commit 5646b20

13 files changed

Lines changed: 365 additions & 181 deletions

File tree

‎examples/autocomplete-react-countries-whitelist/.env.sample‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_PLACEKIT_API_KEY=<your-api-key>

‎examples/autocomplete-react-countries-whitelist/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.env
2+
dist
3+
node_modules
4+
package-lock.json

‎examples/autocomplete-react-countries-whitelist/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Address form example
2+
3+
[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/autocomplete-react/tree/main/examples/autocomplete-react-countries-whitelist)
4+
5+
Make a custom country selector to dynamically change the autocomplete country.
6+
In some use-cases, you may want control over the list of allowed countries. Our built-in country selector is actually a country search and we do not support whitelists (nor blacklists) at the moment. Therefore we suggest this example as a workaround.
7+
8+
Only using [TailwindCSS](https://tailwindcss.com) as a convenience for the basic styling of the example.
9+
10+
## Run
11+
12+
```sh
13+
# clone project and access this example
14+
git clone git@github.com:placekit/autocomplete-react.git
15+
cd autocomplete-react/examples/autocomplete-react-countries-whitelist
16+
17+
# install dependencies
18+
npm install
19+
20+
# create .env file
21+
cp .env.sample .env
22+
```
23+
24+
Open the `.env` file and replace `<your-api-key>` with your PlaceKit API key.
25+
26+
Then run:
27+
28+
```sh
29+
npm run dev
30+
```
31+
32+
And your project will be served at http://localhost:5173.

‎examples/autocomplete-react-countries-whitelist/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"private": true,
3+
"type": "module",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
9+
"dependencies": {
10+
"@placekit/autocomplete-react": "^2.1.2",
11+
"@tailwindcss/forms": "^0.5.6",
12+
"clsx": "^2.0.0",
13+
"prop-types": "^15.8.1",
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.2.27",
19+
"@types/react-dom": "^18.2.12",
20+
"@vitejs/plugin-react": "^4.1.0",
21+
"autoprefixer": "^10.4.16",
22+
"postcss": "^8.4.31",
23+
"tailwindcss": "^3.3.3",
24+
"vite": "^4.4.11"
25+
}
26+
}

‎examples/autocomplete-react-countries-whitelist/postcss.config.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/autocomplete-react-countries-whitelist/src/App.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { PlaceKit } from '@placekit/autocomplete-react';
2+
import { useCallback, useState } from 'react';
3+
4+
const App = () => {
5+
const [country, setCountry] = useState('fr');
6+
7+
return (
8+
<div className="flex flex-col gap-6 items-center justify-center">
9+
<div className="max-w-lg flex items-center gap-2">
10+
<select
11+
value={country}
12+
onChange={(e) => setCountry(e.target.value)}
13+
className="h-[2.375rem] rounded-md border border-gray-300 text-sm"
14+
>
15+
<option value="">Select country</option>
16+
<option value="fr">France</option>
17+
<option value="be">Belgium</option>
18+
<option value="ch">Swiss</option>
19+
</select>
20+
<PlaceKit
21+
apiKey={import.meta.env.VITE_PLACEKIT_API_KEY}
22+
geolocation={false}
23+
options={{
24+
countries: [country],
25+
countrySelect: false,
26+
}}
27+
disabled={!country}
28+
className="w-96"
29+
/>
30+
</div>
31+
</div>
32+
);
33+
};
34+
35+
export default App;

‎examples/autocomplete-react-countries-whitelist/src/global.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
@tailwind variants;

‎examples/autocomplete-react-countries-whitelist/src/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>PlaceKit Autocomplete React address form</title>
7+
</head>
8+
<body class="py-32 bg-slate-50">
9+
<div id="root"></div>
10+
<script type="module" src="/main.jsx"></script>
11+
</body>
12+
</html>

‎examples/autocomplete-react-countries-whitelist/src/main.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
4+
import './global.css';
5+
import '@placekit/autocomplete-js/dist/placekit-autocomplete.css';
6+
7+
import App from './App';
8+
9+
ReactDOM.createRoot(document.getElementById('root')).render(
10+
<React.StrictMode>
11+
<App />
12+
</React.StrictMode>
13+
);

‎examples/autocomplete-react-countries-whitelist/tailwind.config.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module.exports = {
2+
content: [
3+
'./src/**/*.html',
4+
'./src/**/*.{js,jsx}',
5+
],
6+
theme: {
7+
extend: {
8+
colors: {
9+
accent: {
10+
50: '#f0f4ff',
11+
100: '#e0e9fe',
12+
200: '#bad2fd',
13+
300: '#7cadfd',
14+
400: '#3783f9',
15+
500: '#0d63ea',
16+
600: '#0149c8',
17+
700: '#0239a2',
18+
800: '#063386',
19+
900: '#0b2c6f',
20+
},
21+
},
22+
},
23+
},
24+
plugins: [
25+
require('@tailwindcss/forms'),
26+
],
27+
};

0 commit comments

Comments
 (0)