Skip to content

IPlaces.md

Latest commit

 

History

History
338 lines (173 loc) · 6.94 KB

IPlaces.md

File metadata and controls

338 lines (173 loc) · 6.94 KB

@hoststack/ui v0.2.0

@hoststack/ui / components / IPlaces

Interface: IPlaces

Defined in: components.ts:470

Places component props - Google Places autocomplete input with dropdown

Example

<Places
  name="location"
  placeholder="Search for places..."
  onPlaceSelect={(place) => console.log('Selected place:', place)}
  apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}
/>

Extends

  • Omit<IInput, "submitFunction" | "submit" | "reveal" | "copy" | "reset">

Properties

css?

optional css: CSS

Defined in: components.ts:420

Custom CSS styles

Inherited from

IInput.css

error?

optional error: boolean

Defined in: components.ts:422

Whether the input is in an error state

Inherited from

IInput.error

errorMessage?

optional errorMessage: string

Defined in: components.ts:424

Error message to display below the input

Inherited from

IInput.errorMessage

id?

optional id: string

Defined in: components.ts:426

HTML id attribute for the input

Inherited from

IInput.id

listen?

optional listen: boolean

Defined in: components.ts:428

Whether to listen for form validation events

Inherited from

IInput.listen

loading?

optional loading: boolean

Defined in: components.ts:430

Whether to show a loading state

Inherited from

IInput.loading

name

name: string

Defined in: components.ts:432

Name attribute for the input (required)

Inherited from

IInput.name

resetFunction()?

optional resetFunction: () => void

Defined in: components.ts:436

Function to call when reset button is clicked

Returns

void

Inherited from

Omit.resetFunction

submitValid()?

optional submitValid: (value) => boolean

Defined in: components.ts:444

Function to validate input value before submit

Parameters

value

string

Returns

boolean

Inherited from

Omit.submitValid

success?

optional success: boolean

Defined in: components.ts:446

Whether the input is in a success state

Inherited from

IInput.success

successMessage?

optional successMessage: string

Defined in: components.ts:448

Success message to display below the input

Inherited from

IInput.successMessage

warning?

optional warning: boolean

Defined in: components.ts:450

Whether the input is in a warning state

Inherited from

IInput.warning

warningMessage?

optional warningMessage: string

Defined in: components.ts:452

Warning message to display below the input

Inherited from

IInput.warningMessage

width?

optional width: string | number

Defined in: components.ts:454

Width of the input field

Inherited from

Omit.width

apiKey

apiKey: string

Defined in: components.ts:473

Google Maps API key for Places API

onPlaceSelect()?

optional onPlaceSelect: (place) => void

Defined in: components.ts:475

Callback when a place is selected from the dropdown

Parameters

place
description

string

place_id

string

structured_formatting?

{ main_text: string; secondary_text: string; }

structured_formatting.main_text

string

structured_formatting.secondary_text

string

types

string[]

Returns

void

countries?

optional countries: string[]

Defined in: components.ts:485

Country restrictions (ISO 3166-1 Alpha-2 country codes)

types?

optional types: string[]

Defined in: components.ts:487

Types of places to search for

dropdownCSS?

optional dropdownCSS: CSS

Defined in: components.ts:489

Custom CSS styles for the dropdown

dropdownWidth?

optional dropdownWidth: string | number

Defined in: components.ts:491

Width of the dropdown

dropdownHeight?

optional dropdownHeight: string | number

Defined in: components.ts:493

Height of the dropdown