rebebop / react-phone-input Goto Github PK

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.

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,

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,

Is this possible to extend this package to have possibility forward into input id or name properties?

How to add a default value

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

Thank you for this wonderful module, it looks nice.

How can I avoid getting multiple area codes for a country? I was hoping onlyCountries={["us", "ca", "au", "nz"]} would only show 4 items in the select box.

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.

Can this be bumped to the latest react or will this break this npm?

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.

To replicate the issues

• Case 1
  type 1111111111
• Case 2
  type 000000000
  no masking is applied in above cases

Demo

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.

When I click the dropdown and use the arrow keys it throws this kind of error messages.

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.

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

I'm receiving the following warning from React 15:
Warning: Unknown props defaultCountry, onlyCountries, excludeCountries on <input> tag. Remove these props from the element.

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

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.

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.

It cannot be used into standard form because of sending value don't have name property
Example:
"": "+7 999 999-999"

  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)

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

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

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.

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

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.?

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!

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?

First of all, great component you have!

Can you please add support to onBlur and disabled?

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:

• In the already used events: onChange, onFocus for example, you could check for this.props.onChange or this.props.onFocus and call back them.
• Add a destructuration of all props on the input component at the top so that you can overwrite properly the other props.

Area code 226 is not in the Canadian area code map, but it should be.

I've written a PR with the fix: #69

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} />
   }
}

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

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.

Its does not check for new props. It is making this things difficult to handle things on props changeS

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?

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.

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