# rgpl

> React Google Places API library

Latest version **1.0.2** (published 2020-04-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install rgpl
pnpm add rgpl
yarn add rgpl
bun add rgpl
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-04-10 |
| First published | 2020-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 121.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anayo Oleru |
| Maintainers | anayooleru |
| Keywords | react, google-places API, google places |

## Links

- npm: https://www.npmjs.com/package/rgpl
- npm.io page: https://npm.io/package/rgpl

## Dependencies (1)

- [react-load-script](https://npm.io/package/react-load-script.md) 0.0.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-04-10
- 1.0.1 — 2020-04-10
- 1.0.0 — 2020-04-10

## README

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/AnayoOleru/react-google-places-library/issues) [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs) [![Version](https://badge.fury.io/gh/tterb%2FHyde.svg)](https://badge.fury.io/gh/tterb%2FHyde) 

[![HitCount](http://hits.dwyl.com/AnayoOleru/react-google-places-library.svg)](http://hits.dwyl.com/AnayoOleru/react-google-places-library)
# React Google Places Library
A straight forward react npm package, using the google places API to easily search for places. Easy to integrate, more faster to use. Comes with a ready made search input component.


```
npm install --save rgpl
```

[React Google Places Library Package](https://www.npmjs.com/package/rgpl)

## How React Google Places works
Created a single page app to demonstrate how the React Google Places API works, click on the link below:

[View SPA](https://react-google-places-library.now.sh/)

## Getting Started

The React Google Places Library can be loaded as:

-   install the package
-   import *Search* component from the library.


## Sample code on how to use

```
            <Search 
              inputStyle= {{
                width: '100%'
              }}
              placesOption= {{
                types: ["address"],
                componentRestrictions: { country: "ng" }
              }}
              apiKey={`place your API key here`}
              fields={['address_components', 'formatted_address']} 
              containerStyle = {{
                height: 48,
                display: 'flex',
                justifyContent: 'space-between'            
              }}
              inputContainer = {{
                margin: 'auto 16px',
                width: 'calc(100% - 48px - 32px)'
              }}
              callbackFromParent={this.myCallback}
              value={this.state.city}
              placeholder='search city'
               />
```


## Features

- [placesOption](#placesOption)
- [fields](#fields)
- [apiKey](#apiKey)
- [callbackFromParent](#callbackFromParent)
- [value](#value)
- [inputStyle](#inputStyle)
- [inputContainer](#inputContainer)
- [containerStyle](#containerStyle)



# Props

## placesOption
This represents the option argument on the Google places API. This should be an object.

```
            <Search 
              placesOption= {{
                types: ["address"],
                componentRestrictions: { country: "ng" }
              }}
               />
```

[Read more](https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete)


## fields
This represents the *setFields* widget on the Google places API. This should be an array.

```
            <Search 
              fields={['address_components', 'formatted_address']} 
               />
```

[Read More](https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.setFields)


## API Key (apiKey)
Google API key. Generate your Google API key. Pass it as a string.

```
            <Search 
              apiKey={`place your API key here`}
               />
```


## callbackFromParent
This props is very compulsory and important to get the places information selected from the list from the child component.

Created a method on your component:

```
  myCallback = (dataFromChild1, dataFromChild2) => {
    this.setState({ city: dataFromChild1, query: dataFromChild2 });
    }
```

If you want not only the city from the API, you can get the rest of the information from the query component state, or the dataFromChild2 params.

Next pass the method as props to the *Search* component

```
            <Search 
              callbackFromParent={this.myCallback}
               />
```


## value
Represents what will be displayed on the input box as the user and types, and also represents the location or address selected.

```

            <Search 
              value={this.state.city}
               />
```


## inputStyle
Search component accepts an input style props that styles inside input component

```
            <Search 
              inputStyle= {{
                width: '100%',
                backgroundColor: blue
              }}
               />
```

## inputContainer
Search Component also accepts an inputContainer props for styling around the input box

```
            <Search 
              inputContainer = {{
                margin: 'auto 16px',
                width: 'calc(100% - 48px - 32px)'
              }}
               />

```

## containerStyle 
Search Component also accepts a containerStyle props for styling outside or around the input box. It represents
the box around the inputContainer props.

```
            <Search 
              containerStyle = {{
                height: 48,
                display: 'flex',
                justifyContent: 'space-between'            
              }}
               />
```

## placeholder
Input placeholder

```
            <Search 
              placeholder='search city'
               />
```

## License

Copyright 2020 Anayo Oleru
MIT License

---
_Source: https://npm.io/package/rgpl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._