ubilabs / react-geosuggest Goto Github PK
View Code? Open in Web Editor NEWA React autosuggest for the Google Maps Places API.
Home Page: http://ubilabs.github.io/react-geosuggest/
License: MIT License
A React autosuggest for the Google Maps Places API.
Home Page: http://ubilabs.github.io/react-geosuggest/
License: MIT License
Our application pulled in 1.16.0 of this module, and we get an error when importing:
Cannot find module './input.jsx'
I ran prepublish
on this module, and the transpiled /module/Geosuggest.js
has the expression require('./index.jsx')
, but the transpiled file is actually named index.js
.
What are your thoughts on exposing focus state, and a method to clear the input state ?
This would allow the page UI to depend on suggest being open or not, and also allow a google maps like clear button
Hi,
I used your component and it's great. But then i ran into a problem that i need to listen to the input changes event, for example, if the input value is empty, my "Action" button will be disabled.
Unfortunately, there's no exposed function for that event yet.
Does it make sense?
Hi there! This is a great component, I am building a Meteor app using this plugin, and it would be nice if the component handled the script internally, so that the component could be loaded at any time, and handle it's own dependency on the external script.
Is this something that is possible? Or should I fork and make the changes tailored to my own needs?
Thanks!
1 line change but still it needs to be done :D
It's not clear from the Readme or Example.... does this return the Places API data (street_address, country, administrative_area_level_1, etc...) ?
For example i'm currently using a jQuery GeoComplete that returns these fields in the response.
I'm not terribly familiar with the Google API's, would that data require extra calls or does it just need to be exposed?
Thanks!
Im sure this is straight forward but im getting
Uncaught TypeError: Cannot read property 'clear' of undefined
to make the input clear onFocus
using refs as described
https://facebook.github.io/react/docs/more-about-refs.html
onFocus() {
this.geosuggest.clear();
}
<Geosuggest
ref={(ref) => this.geosuggest = ref}
onFocus={this.onFocus}
/>
Thanks in advance.
It's very common in the React world to use React.PropTypes not just for validation of component's props but also to have a clear picture of all the props that a component manage and for documentation.
In getDefaultProps is better to define just conditional props since mandatory props will be in any case overwritten.
An inspiration can be found on the PR I submitted #29
It would be worth updating the main
property in the package.json
file to point to dist/react-geosuggest.js
(or equivalent pure JS file if that's not suitable) so that using require
to pull react-geosuggest
doesn't first require a build step.
For me, as this component is JSX, I have to update my webpack config and jest preprocessor script to include react-geosuggest
as an allowed node_modules
library to be included as part of the build.
I am using Browserify to build my own project, but my build fails when I pull in this project as a dependency:
Cannot find module 'reactify' from '/node_modules/react-geosuggest'
This is because you have reactify
in the browserify transforms section of your package.json
(which means it is always executed when Browserify runs, even when it is required
in by outside projects that install it via npm), but it isn't installed via dependencies
. Thus, it crashes when Browserify can't find the missing dependency.
From the Browserify docs:
Now (that you have added a transform field to package.json) when somebody require()s your module, (the transform) will automatically be applied to the files in your module without explicit intervention by the person using your module.
I don't think this is a good practice for modules which are published for use on npm, because the compilation should have happened before publishing anyway (as you are already doing).
Since you are already using a Gulpfile, perhaps it would make more sense to just perform the JSX transformation as part of your Gulp task?
(FYI, this was working for me on version 1.2.1, but after the release of 1.2.3 it is now breaking)
In current release we unable to apply styles from variable.
For standart "webpack way" we requires styles as module and apply to element. For example:
import myCss from './mycss-or-less-or-scss-or-other'
....
And now i need apply my styles to element, but i cannot do that:
For example ReactCSSTransitionGroup
accept class names as parameter
React documentation says
These standard attributes are supported:
accept acceptCharset accessKey action allowFullScreen allowTransparency alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked classID className colSpan cols content contentEditable contextMenu controls coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrapp```
your current list is :
autocapitalize autocomplete autocorrect autoFocus autosave disabled form formaction
formenctype formmethod formnovalidate formtarget height id inputmode maxlength maxlength
name pattern placeholder readonly required selectionDirection size spellcheck tabindex
Obviously, the React list is longer, but that is not a problem.
The problem is about stuff present in your list that are not handled by React.
For example autocapitalize
.
Something else that you should be carefull, is the use of capital letter or not.
For example, React allows autoComplete
, but you allow autocomplete
.
This lead in stuff not being propagated.
Would be nice if we could pass on any options (Country for example) available here https://developers.google.com/maps/documentation/javascript/places-autocomplete to the react component.
It would be great if this component had tests, and code coverage metrics. We can use mocha
, sinon
, jsdom
, proxyquire
and testUtils
.
Thoughts?
When the Geosuggest input
is in focus and the react route changes, the following warning pops in the console:
Warning: setState(...): Can only update a mounted or mounting component.
This usually means you called setState() on an unmounted component.
This is a no-op. Please check the code for the Geosuggest component.
Then it points to this part:
/**
* When the input loses focused
*/
hideSuggests: function hideSuggests() {
this.props.onBlur();
setTimeout((function () {
this.setState({ isSuggestsHidden: true });
}).bind(this), 100);
},
Not sure if I am supposed to destroy
the component somehow in my componentWillUnmount()
?
"history": "~1.13.x",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-geosuggest": "^1.13.0",
"react-router": "^1.0.2",
Good day,
Having an issue with the module not found.
I call it in app.jsx
var Geosuggest = require('geosuggest')
In console I get the following error:
ERROR in ./components/app.jsx
Module not found: Error: Cannot resolve module 'geosuggest' in /Users/sergiopellegrini/Sites/recipes-flux/client/components
resolve module geosuggest in /Users/sergiopellegrini/Sites/recipes-flux/client/components
looking for modules in /Users/sergiopellegrini/Sites/recipes-flux/node_modules
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest doesn't exist (module as directory)
resolve 'file' geosuggest in /Users/sergiopellegrini/Sites/recipes-flux/node_modules
resolve file
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest doesn't exist
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.js doesn't exist
/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.jsx doesn't exist
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest]
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest]
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.js]
[/Users/sergiopellegrini/Sites/recipes-flux/node_modules/geosuggest.jsx]
@ ./components/app.jsx 11:17-38
I then renamed the module to react-geosuggest but then get the following:
Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null
Your assistance will be much appreciated.
E.g.
bower install react
bower install react-geosuggest
And a basic template
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Index</title>
<script src="bower_components/react/react.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components/react-geosuggest/dist/react-geosuggest.js" type="text/javascript" charset="utf-8"></script>
</head>
</html>
I'm getting a.
Uncaught Error: Cannot find module 'react'
The README mentions that this usage should be possible.
window.React
is exposed by react.js, but the require
s in react-geosuggest.js can't find it, I might be missing a config option! I'm not sure if you can ask that webpack/browserify wrapper to do something to link those up.
Cheers!
We're looking into using the component in a ClojureScript/Reagent page which uses quite a different build system. It would be neat to avoid integrating a webpack/browserify step into the build for now but it might come to that anyway!
When the component lives in a form and one of the suggested items is selected using keyboard (arrows + hitting enter), the form is submitted.
From the source code I see you didn't include event.preventDefault()
probably on purpose? Could this be at least configurable by props? There's no other way how to prevent this as you don't pass the event to the onSuggestSelect
method.
Any interest in adding this in? Would be handy
Is there an easy way to have a Submit button work the same as a onSuggestSelect?
Hello, great component, thanks for your hard work!
Lets say I save the suggest object returned by onSuggestSelect
.
Can I feed this object back into a certain prop to re-create the previous state?
Hi @ro-ka! Another n00b question:
How do you suggest we handle the case where no result is found in the auto-suggest? Is it possible for the input field to just take the string inputted and pass that as a value (or is that already being done?)
Is possible? Thanks!
I have a button to clean form input value include geosuggest.
How to call clean() outside geosuggest section?
We had a bug reported of a user not being able to select an item from the suggestions.
I traced the problem to GeosuggestItem.onClick
and Geosuggest.hideSuggests
functions. There's a 100ms timeout before the state in Geosuggest
component changes to hide the suggestions. If user clicks on a GeosuggestItem
, the hideSuggests
function is executed at the same time (on blur). If user doesn't release the mouse button to actually trigger a click event, the list of suggestions is gone and nothing has been selected.
What would be the most correct solution to this problem? Increasing the timeout interval in hideSuggests
or simply using onMouseDown
event in the GeosuggestItem
instead?
Hey,
For edit mode, it could be useful if the initialValue can be restored automatically from an existing Lat/Lng.
Thanks!
Hey, the component you've got here looks great, but visiting the demo results in an invariant violation:
Error: Invariant Violation: App.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. app.js:7:17671
Hi,
Great job you've done there. Thanks.
Just one question: why reactify
is in dependencies
and not devDependencies
?
Here there are some points I would like to highlight
These stuff can be found in my PR #29
When I put required
nothing happens
<Geosuggest
placeholder="Start location"
ref="start_location"
required
/>
When I build my app with gulp and browserify, I get the error:
Cannot find module './GeosuggestItem.jsx' from /blahblah/node_modules/react-geosuggest/module
When I look at the directory specified in the error, there is a file "GeosuggestItem.js" (without the "x"). Why would it be looking for GeosuggestItem.jsx instead?
Im not sure if this really is this projects problem, but I have a form that uses this component as one of it's fields:
<Geosuggest onChange={this.onChange.bind(this)}
Form is validated using https://github.com/erikras/redux-form which seems to capture onChange
events of this component somehow since my handler is not being called.
I guess this is because this project does not use prefixed onChange
property?
I have a project that pulls in react-geosuggest via npm. The project is bundled with Browserify + Babelify.
When I bundle this on node 0.10.x, I run into the following error:
23:05:12 Error: Cannot find module 'classnames' from '/src/node_modules/react-geosuggest/module'
23:05:12 at /src/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
23:05:12 at process (/src/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
23:05:12 at ondir (/src/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
23:05:12 at load (/src/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
23:05:12 at onex (/src/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
23:05:12 at /src/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
23:05:12 at Object.oncomplete (fs.js:107:15)
Bundling works on node v5.1.0, however.
As a workaround on node 0.10.x, I included classnames in our own package.json dependencies and bundling worked.
Happy to provide more details if it would help!
Just null in suggestsGoogle
let types = [
'country'
];
<Geosuggest types={types}/>
Hallo,
I'm trying to use the package but I get the error:
google is not defined, it refers to the googleMaps default prop.
It is maybe due to the fact that my code is running server and client side. I tried to force:
var GoogleMaps = window.google.maps;
but it is not working!
Is there a way to solve this?
Hi @ro-ka! This library looks great, thank you! For my use-case, I need to style the country (and ideally, the city as well) separately from the place name.
In your demo, you have only one element in the li.geosuggest-item
. I was wondering if it is possible today, or possible to add, the ability to distinguish country from the place name and render them with different css classes?
The Block is "geosuggest" while items are "input", "suggests" and "suggest-item".
So "geosuggest-item" here https://github.com/ubilabs/react-geosuggest/blob/master/src/GeosuggestItem.jsx should be changed to geosuggest__suggest-item
The --focus modifier should be added and used instead of https://github.com/ubilabs/react-geosuggest/blob/master/src/geosuggest.css#L20
Current "no-async" solution is too slow for mobile clients.
It posible to load library "async way" with callback?
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
Tried this out of the box, and got this error:
node_modules/react-geosuggest/src/Geosuggest.jsx Line 222: Unexpected token <
I'm sure it's something with complaining on my end. Any suggestions?
Hi. I want to use the complete gmaps object as returned by the Google Maps API after I select a location. The other values are not enough for what I'm trying to do. The problem I'm facing is that the gmaps object is not the same as I would expect. For example, gmaps.geometry.location.lat
is a function()
instead of just being a number.
I checked this in both Firefox and Chrome on your example website.
Great library. I'd love to use it, but I'm a react noob. I can't get this to work with my project based on relay-starter-kit, which uses react 0.14.0-beta3. For some reason, I can't get anything useful to install when I fork and upgrade the dependency. When I install via npm (there's no actual source, just the meta files like package.json).
A fix (maybe an alternative branch) would be very helpful.
Thanks!
I'd like to remove Untied States from results. I did this which worked. Is there a more elegant way?
if(suggest.label.substr(suggest.label.length - 13) === "United States") {
suggest.label = suggest.label.substring(0, suggest.label.length - 15);
}
In the getSuggestItems function on line 268
Hi,
Would be nice to integrate it with react-formsy:
https://github.com/christianalfoni/formsy-react
Regards!
Any solution to get rid of the following React warning: Warning: input is a void element tag and must not have children
or use props.dangerouslySetInnerHTML
. Check the render method of NewHaulPage.
From google doc
Geocoding is a time and resource intensive task. Whenever possible, pre-geocode known addresses (using the Google Maps Geocoding API described here or another geocoding service), and store your results in a temporary cache of your own design.
A basic implementation can be found on the PR I submitted #29
If I made a PR for the below functionality, would you consider merging it?
Thoughts?
After update the ref "geosuggestInput" does not work anymore. How can i get the input from outside to apply eg .focus().
Do you think it would be a good idea to have a "Powered by Google" at the bottom of the dropdown?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.