rebebop / react-phone-input Goto Github PK
View Code? Open in Web Editor NEWA simple react component to format phone number as the user types
License: MIT License
A simple react component to format phone number as the user types
License: MIT License
First of all great component +1 !
I'm wondering if there is a way to just get the country code. For example I want to be able to get +1 from +1 (123) 456-7890. The handelOnChange function only gives me the full value.
I can hack it to give me everything before "(" but not all countries use the same format so I'm kinda stuck.
Thanks
I am trying to pass a value
which is non-null to the component, I see that the constructor tries to format it.
But when I pass an already-formatted value like: "+1 (562) 756-2233"
, the result is formattedNumber: "+"
in the state.
I don't really have taken a look to the formatNumber
algorithm, but supposedly it looks like that we should maybe sanitize more the number (like removing everything which is not a number: parenthesis, spaces).
I could land a PR also for this too, I suppose.
There are no methods that are exposed to the outside world.
Would be nice to have methods like setFocus(), getValue(), getCountryCode(), getNumberFormat(), getCountry(). I will be working on these and creating a pull request.
Any changes made in react-phone-input-style.less does not affect the component. It will be better if you provide a option to over right the react-phone-input-style.less file.
Hi,
I am trying to open the Index.html and expecting to see the phone input. But i dont think the demo is complete. If that is so i will work and fix the demo as well with different options.
Regards,
Aaron
constructor(props){
super(props);
this.isValid = (event)=>{
console.log(event);
return ReactPhoneInput.defaultProps.isValid(event);
}
}
render(){
return (<ReactPhoneInput isValid={this.isValid} className="form-control" defaultCountry={'us'} {...this.props}></ReactPhoneInput>);
}
Currently to get unformatted value from this component you need to use something like in code sample above. Sometimes it may be required for request building, therefore I'm asking you to add method like onChangeUnformatted(input)
I've tried to implement the component into my project and am unable to see the country drop down.
The documentation doesn't say if any extra props are required to display the country dropdown.
I am implementing the component as below:
Formatting for the phone numbers works fine though.
Screenshot attached.
I'm receiving the following warning from React 15:
Warning: Unknown props defaultCountry, onlyCountries, excludeCountries on <input> tag. Remove these props from the element.
First of all, great component you have!
Can you please add support to onBlur and disabled?
Hi,
This component seems to be only good for registration forms (i.e. when the phone number doesn't exist yet), because the selected country always has to be supplied manually.
But what if I want to use this component to edit an already existing phone number? Why do I still need to specify the selected country manually? Can you make it so that the country is automatically parsed from the phone number's country code?
For example, if I provide +37255530593
as the value, it should automatically set Estonia as the country code. Right now it always sets Afghanistan, (unless another country is manually provided)
With the way it is now, I first need to use some other library to parse the country from the phone number, and then supply that country to ReactPhoneInput
, which is a lot of redundant work.
Is there any way to determine if the number entered in the field is valid?
I.e., is there a callback or a prop or something that is aware of whether the number currently entered is correctly formatted with 10 digits, etc.?
While you can set the default value via:
<ReactPhoneInput value="..." />
There is an issue in that if you change the state of the component it is in then it won't get the updated value. It would appear a change need to be made to componentWillReceiveProps() function to accept an update value.
Expectation is that the number in the field, in the example below, will end up being "+33 4 93 42 64 90":
class MyView extends Component {
constructor(props) {
super(props);
this.state({
phone: "+1 514 275 8981"
});
}
componentWillMount() {
this.setState({
phone: "+33 4 93 42 64 90"
});
}
render() {
return <ReactPhoneInput value={this.state.phone} />
}
}
Hey all,
Is there any interest in this library? Are enough people still using it? I was thinking of slowly refactoring the library to Typescript and make general improvements to it. Still keeping it mostly feature complete with what it is today. But before expending the effort, just wanted to get a general feedback from the users.
Does anyone know if there's a component like this one available for React Native? I've been searching online and so far nothing.
Thanks,
Alvaro
It cannot be used into standard form because of sending value don't have name property
Example:
"": "+7 999 999-999"
Area code 226 is not in the Canadian area code map, but it should be.
I've written a PR with the fix: #69
We cannot consider a software is mature until unit-tests are written and covered at least 80% of code.
Let's write it and get badges from coverall.io accordingly
If you select an option and then hit the menu, its impossible to close the menu without selecting another option. It would be really helpful if clicking out of the menu closed it, and if it let you select the current already selected option to close as well.
Its does not check for new props. It is making this things difficult to handle things on props changeS
How to add a default value
Can this be bumped to the latest react or will this break this npm?
It would be useful to have a few examples, either in the form of documentation or actual code. The current example is the ReadMe isn't enough to do anything useful with.
For example I am trying to use with Redux and can't work out the right way to use the widget?
PS Changed the nature of the ticket, since it struck me that name & id weren't the real limitations.
When I try to use the package with React 16, npm gives me this warning:
npm WARN [email protected] requires a peer of react@^0.14.8 || ^15.0.1 but none is installed. You must install peer dependencies yourself.
When I try to do a build with React 16, an error is thrown in the file: ./node_modules/react-phone-input/dist/index.js
:
Uncaught TypeError: Cannot read property 'string' of undefined
Hi guys how are you? It's very cool the component, but I think maybe it will better return the value with spaces so that we can get the country code and the primary phone number separately. Or already do we have? Of course it will be a PR.
Thks
When I click the dropdown and use the arrow keys it throws this kind of error messages.
In our app we don't wish to list all the possible area codes for each country, for example the ones in US and Canada. It results in the list being much larger than it needs to be without adding much of value (in our opinion).
A property for the option to exclude these would be great!
An idea why I would be getting this? no one else seems to complain. I have lodash installed.
The component shows fine but after setting it blows up with the exception
any ideas?
Is this possible to extend this package to have possibility forward into input id or name properties?
Currently, react-phone-input does not expose onFocus / onBlur and other kind of events.
This is important when you have to trigger events based on focus / blur events.
My suggestion would be:
this.props.onChange
or this.props.onFocus
and call back them.Was just wondering if there are necessary use cases for keeping the onChange in componentDidMount because when using this phone component with validation libraries like formsy or redux-form this automatically sets the input to be in a non-pristine state, meaning on pageload the value of this field is already invalid and displaying our validation error message. Permission to remove?
Hey there,
I use a polymorphic web server with ReactDOM.renderToString() on server-side, and ReactDOM.render() on client-side. Currently when I use react-phone-input on server-side, I get this error:
ReferenceError: document is not defined at Object.<anonymous> ([...]/node_modules/react-phone-input/dist/index.js:1:2330)
It looks like the component wasn't designed to work on the server if it requires a var provided by the browser. would love to use this on the server too so it fits with polymorphism.
I'm using version 1.1.3 of react-phone-input
The current 'dev' page only demonstrates a limited case of scenarios. We should consider a more complete page and possibly move the test cases out of the index.js
page.
What is the ideal way to prefill the form? I cannot get a placeholder to show nor set a default value, regardless of when in the lifecycle I try to add it (actually, I can set the content with this.refs.phoneInput.state.formattedNumber
, but only after the user interacts with it). The idea is that the field should be already filled in with the previous form if they are coming back from an earlier save.
Hi,
Firstly, I would like to thank you for having made this very nice phone input.
Secondly, I was wondering if it was possible to reset the phone input for the ReactPhoneInput component?
I embedded the component like this:
<ReactPhoneInput ref="phone"
defaultCountry={"be"}
onlyCountries={['be', 'nl', 'gb', 'lu', 'fr', 'de']}
onChange={this._changePhone}
value={this.props.phone}
/>
I thought that if I cleared this.props.phone then the input field would be reset but that is not the case. Do you have an idea on how I could achieve a reset of the component? Thank you,
if you select the Ukrainian number (+380) and then press backspace, then it will erase 0 and the cursor will move to the number 3, and you will have to stay on the number 8
In certain cases the 'value' passed will be corrupted with the default dialing code. For example:
<ReactPhoneInput defaultCountry="be" value="+1 514 5278980"/>
Will result in a display value of:
+32 151 45 27 8980
The situation I observed it is when the parent component had the following code:
const {loaded, phone} = this.state;
if (loaded) {
return '<div>loading...</div>'
} else {
<PhoneInput defaultCountry="be" value={phone} name="phone" onChange={this.handlePhoneChange}/>
}
The logic used in resolving issue #40 took the approach of using the current code for phone numbers not starting with '+' in the updateFormattedNumber() function and then adapting and adapted version of the code from the handleInput() function. Could we apply the same approach in the constructor too?
Note, the short term workaround is to omit the defaultCountry
option.
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.