{"_id":"@baudevs/google-places-autocomplete","name":"@baudevs/google-places-autocomplete","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@baudevs/google-places-autocomplete","version":"1.0.0","description":"A simple, Google Places Autocomplete component for React using the new Google Places JavaScript API","keywords":["google","places","autocomplete","autocomplete (New)","react","baudevs"],"author":{"name":"Baudevs"},"license":"CC BY-NC 4.0","private":false,"projectType":"library","repository":{"type":"git","url":"https://github.com/baudevs/baudevs-monorepo.git/libs/google-places-autocomplete"},"publishConfig":{"access":"public"},"dependencies":{"@nx/vite":"^20.3.0","@vitejs/plugin-react":"^4.0.0","react":"^19.0.0","vite":"^6.0.5","vite-plugin-dts":"~4.4.0"},"devDependencies":{"@types/node":"^20.17.12","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.2"},"sideEffects":false,"engines":{"node":">=20"},"scripts":{},"_id":"@baudevs/google-places-autocomplete@1.0.0","_integrity":"sha512-JzBmpMCgFc2XSZp16RgH51y9FEAXk9Dz8rJfaBCyUUhGFMQBNWxQ6rsOg70W8UY2ukNBicX6hzf5J7avwxa22w==","_resolved":"/private/var/folders/55/cd3jqfr93bq3fzd20_nmw6cr0000gn/T/bde1ee14a0bb0b9775ce11f773526126/baudevs-google-places-autocomplete-1.0.0.tgz","_from":"file:baudevs-google-places-autocomplete-1.0.0.tgz","_nodeVersion":"23.1.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-JzBmpMCgFc2XSZp16RgH51y9FEAXk9Dz8rJfaBCyUUhGFMQBNWxQ6rsOg70W8UY2ukNBicX6hzf5J7avwxa22w==","shasum":"2d8250667d73fedafb4378ae169d2b2b726da618","tarball":"https://registry.npmjs.org/@baudevs/google-places-autocomplete/-/google-places-autocomplete-1.0.0.tgz","fileCount":3,"unpackedSize":8801,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDw1xdSmf38cvTQm81bzckBsqzzimS8RYRyF1J3KWsyNgIgddurAH5VvlMZSDIVDNJAgSuoSbqZTMpGs8UOEELeGTY="}]},"_npmUser":{"name":"baudevs_tech","email":"tech@baudevs.com"},"directories":{},"maintainers":[{"name":"baudevs_tech","email":"tech@baudevs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/google-places-autocomplete_1.0.0_1737742248016_0.17131023972778148"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-24T18:10:47.888Z","1.0.0":"2025-01-24T18:10:48.194Z","modified":"2025-01-24T18:10:48.499Z"},"maintainers":[{"name":"baudevs_tech","email":"tech@baudevs.com"}],"description":"A simple, Google Places Autocomplete component for React using the new Google Places JavaScript API","keywords":["google","places","autocomplete","autocomplete (New)","react","baudevs"],"repository":{"type":"git","url":"https://github.com/baudevs/baudevs-monorepo.git/libs/google-places-autocomplete"},"author":{"name":"Baudevs"},"license":"CC BY-NC 4.0","readme":"# @baudevs/google-places-autocomplete\n\nA React component library for integrating Google Places Autocomplete using the new Google Places Web Service API. This library simplifies fetching and displaying autocomplete suggestions while allowing you to handle place selection events easily.\n\n## Features\n\n- **Powered by the latest Google Places Web Service API**.\n- **Lightweight and Fast**: Built using Vite for modern development and efficient builds.\n- **Customizable**: Provides an easy-to-use interface for fetching and displaying autocomplete suggestions.\n- **Debounced Input**: Reduces API calls by debouncing user input.\n\n---\n\n## Installation\n\nTo install the library, use your favorite package manager:\n\n```bash\n# Using pnpm\npnpm add @baudevs/google-places-autocomplete\n\n# Using npm\nnpm install @baudevs/google-places-autocomplete\n\n# Using yarn\nyarn add @baudevs/google-places-autocomplete\n```\n\n---\n\n## Usage\n\n### Basic Example\n\nHere's how you can use the `PlaceAutocomplete` component in your React application:\n\n```tsx\nimport React from 'react';\nimport { PlaceAutocomplete } from '@baudevs/google-places-autocomplete';\n\nconst App = () => {\n  const handlePlaceSelect = (placeId: string) => {\n    console.log('Selected Place ID:', placeId);\n    // Fetch place details or perform additional actions with the placeId\n  };\n\n  return (\n    <div style={{ maxWidth: '400px', margin: '0 auto' }}>\n      <h1>Google Places Autocomplete</h1>\n      <PlaceAutocomplete\n        apiKey=\"YOUR_GOOGLE_API_KEY\"\n        onPlaceSelect={handlePlaceSelect}\n        placeholder=\"Search for a location\"\n      />\n    </div>\n  );\n};\n\nexport default App;\n```\n\n---\n\n## Props\n\n| Prop            | Type                        | Default               | Description                                                                          |\n|-----------------|-----------------------------|-----------------------|--------------------------------------------------------------------------------------|\n| `apiKey`        | `string`                    | **Required**          | Your Google API key with the Places API enabled.                                     |\n| `onPlaceSelect` | `(placeId: string) => void` | **Required**          | Callback function triggered when a user selects a place.                            |\n| `placeholder`   | `string`                    | `'Search for a place'` | Placeholder text for the input field.                                               |\n\n---\n\n## Fetching Place Details\n\nAfter a user selects a place, you can use the `placeId` to fetch additional details via the Google Places API:\n\n```ts\nconst fetchPlaceDetails = async (placeId: string) => {\n  const apiKey = 'YOUR_GOOGLE_API_KEY';\n\n  try {\n    const response = await fetch(\n      `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&key=${apiKey}`\n    );\n    const data = await response.json();\n    console.log('Place Details:', data.result);\n  } catch (error) {\n    console.error('Error fetching place details:', error);\n  }\n};\n```\n\n---\n\n## Development\n\nTo contribute or customize the library, follow these steps:\n\n### Prerequisites\n- Node.js (>= 14.x)\n- pnpm (preferred)\n\n### Clone the Repository\n```bash\ngit clone https://github.com/your-org/baudevs-google-places-autocomplete.git\ncd baudevs-google-places-autocomplete\n```\n\n### Install Dependencies\n```bash\npnpm install\n```\n\n### Start Development\n```bash\npnpm dev\n```\n\n### Build the Library\n```bash\npnpm build\n```\n\n### Run Tests\n```bash\npnpm test\n```\n\n---\n\n## Publishing to npm\n\nEnsure you have configured your npm account and have access to the `@baudevs` scope. Then, run the following command to publish:\n\n```bash\npnpm publish --access public\n```\n\n---\n\n## License\n\nThis library is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n\n---\n\n## Contributing\n\nWe welcome contributions! Please open an issue or submit a pull request to help improve this library.\n\n---\n\n## Support\n\nIf you encounter any issues or have questions, feel free to [open an issue](https://github.com/your-org/baudevs-google-places-autocomplete/issues) or contact us directly.\n\n---\n\n## Acknowledgments\n\n- Built using Vite for modern, blazing-fast development.\n- Powered by the Google Places API.\n- Special thanks to the open-source community for inspiration.\n\n","readmeFilename":"README.md"}