Generally we use regular expression to validate phone number which fails in many cases.  For example +91 9677146866 is the correct number which exists, +91 2677146866 is also correct number which doesn't exists. Our regular expression shows both as valid phone numbers. For accurate phone number validation, we will use google-libphonenumber library.

Phone number field with country code

Observe below image. Provide field for country code and number

Validating Phone number with google-libphonenumber

Import Utils from google-libphonenumber
import {PhoneNumberFormat, PhoneNumberUtil} from 'google-libphonenumber';

validatePhoneNumber(phoneNumber) {
  /*
  Phone number validation using google-libphonenumber
  */
  let valid = false;
  try {
    const phoneUtil = PhoneNumberUtil.getInstance();
    valid =  phoneUtil.isValidNumber(phoneUtil.parse(phoneNumber));
  } catch(e) {
    valid = false;
  }
  if(valid) {
    // do something
  } else {
    // do something
  }
}

Get Valid Phone number in international format

When save numbers in database, you better save them in single international format than many formats. Here is the piece of code which converts normal phone number to international format. 
getValidNumber(phoneNumber) {
  const phoneUtil = PhoneNumberUtil.getInstance();
  const parsedNumber = phoneUtil.parse(phoneNumber);
  return phoneUtil.format(parsedNumber, PhoneNumberFormat.INTERNATIONAL)
}

CallingCodes.js

This file contains all country codes, which will be passed to react-select component as options
export default [
    {country : 'Afghanistan',   value : '93',   code : 'AF'},
    {country : 'Albania',   value : '355',  code : 'AL'},
    {country : 'Algeria',   value : '213',  code : 'DZ'},
    {country : 'American Samoa',    value : '1-684',    code : 'AS'},
    {country : 'Andorra',   value : '376',  code : 'AD'}
    .........
];
Using react-select component create Select component for selecting country code
<Select value={this.state.country} onChange={this.onSelect2} placeholder="country code"
               options={CallingCodes} labelKey="country" valueKey="value" valueRenderer={(country) => country.value}>
</Select>

Complete component code

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-select/dist/react-select.min.css';
import './phone-number.css';
import React from 'react';
import CallingCodes from './CallingCodes';
import {FormControl} from 'react-bootstrap';
import Select from 'react-select';
import {PhoneNumberFormat, PhoneNumberUtil} from 'google-libphonenumber';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      country:'',
      number:'',
      message:''
    }
    this.onChange = this.onChange.bind(this);
    this.onSelect2 = this.onSelect2.bind(this);
    this.validatePhoneNumber = this.validatePhoneNumber.bind(this);
  }

  onChange(event) {
    this.setState({
      number:event.target.value
    });
    this.validatePhoneNumber('+'+this.state.country+' '+event.target.value);
  }

  onSelect2(cntrObj) {
    this.setState({
      country:cntrObj.value
    });
    this.validatePhoneNumber('+'+cntrObj.value+' '+this.state.number);
  }

  validatePhoneNumber(phoneNumber) {
    /*
    Phone number validation using google-libphonenumber
    */
    let valid = false;
    try {
      const phoneUtil = PhoneNumberUtil.getInstance();
      valid =  phoneUtil.isValidNumber(phoneUtil.parse(phoneNumber));
    } catch(e) {
      valid = false;
    }
    if(valid) {
      this.setState({
        message:'Phone number '+this.getValidNumber(phoneNumber)+' is valid',
        color:'green'
      });
    } else {
      this.setState({
        message:'Phone number '+phoneNumber+' is not valid',
        color:'red'
      });
    }
  }

  getValidNumber(phoneNumber) {
    const phoneUtil = PhoneNumberUtil.getInstance();
    const parsedNumber = phoneUtil.parse(phoneNumber);
    return phoneUtil.format(parsedNumber, PhoneNumberFormat.INTERNATIONAL)
  }

  render() {
    return (
      <div>
        <h1>Phone number with country codes using ReactJS</h1>
        <div className="phone-number" style={{display:'flex'}}>
          <div className="phone-number--country">
            <Select value={this.state.country} onChange={this.onSelect2} placeholder="country code"
               options={CallingCodes} labelKey="country" valueKey="value" valueRenderer={(country) => country.value}>
            </Select>
          </div>
          <div className="phone-number--number">
            <FormControl value={this.state.number} onChange={this.onChange} placeholder="phone number">
            </FormControl>
          </div>
        </div>
        <div className="message" style={{color:this.state.color}}>
          {this.state.message}
        </div>
      </div>
    )
  }
}
Read More
This is simple code which can save some of your time, if you trying to build Select field for languages. Find below for complete code

Languages

Find below Languages.js which contains all language names and codes
export default [
    {"value":"English","code":"EN"},
    {"value":"Japanese","code":"JA"},
    {"value":"Afrikaans","code":"AF"},
    {"value":"Albanian","code":"SQ"},
    ......
];

Normal Select Box

This normal select box in which Languages were mapped as options
<select value={this.state.lang} onChange={this.onSelect}>
    {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
</select>

React-bootstrap Select box

This Select box uses bootstrap styles and components
<FormControl value={this.state.lang} onChange={this.onSelect} componentClass="select" placeholder="select">
   {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
</FormControl>

React-select Select box

react-select is React version of Select2. 
<Select value={this.state.lang} onChange={this.onSelect2} placeholder="select"
   options={Languages} labelKey="value" valueKey="code">
</Select>

Complete component code

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-select/dist/react-select.min.css';
import React from 'react';
import Languages from './Languages';
import {FormControl} from 'react-bootstrap';
import Select from 'react-select';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lang:'EN'
    }
    this.onSelect = this.onSelect.bind(this);
    this.onSelect2 = this.onSelect2.bind(this);
  }

  onSelect(event) {
    this.setState({
      lang:event.target.value
    });
  }

  onSelect2(language) {
    this.setState({
      lang:language.code
    });
  }

  render() {
    return (
      <div>
        <h1>Select box for languages</h1>
        <select value={this.state.lang} onChange={this.onSelect}>
           {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
        </select>
        <br/><br/><br/>
        <h1>Bootstrap Select box for languages</h1>
        <FormControl value={this.state.lang} onChange={this.onSelect} componentClass="select" placeholder="select">
          {Languages.map((language) => <option value={language.code}>{language.value}</option>)}
        </FormControl>
        <br/><br/><br/>
        <h1>React Select2 for languages</h1>
        <Select value={this.state.lang} onChange={this.onSelect2} placeholder="select"
           options={Languages} labelKey="value" valueKey="code">
        </Select>
      </div>
    )
  }
}
Read More
This is simple code which can save some of your time, if you trying to build Select field for timezones. Find below for complete Timezones code

Timezones

Find below for Timezones.js which contains all timezone names and values
export default [
    {"value":"America/Adak","name":"Adak"},
    {"value":"America/Anchorage","name":"Anchorage"},
    {"value":"America/Anguilla","name":"Anguilla"},
    {"value":"America/Antigua","name":"Antigua"},
    .....
  ];

Normal Select Box

This normal select box in which Timezones were mapped as options
<select value={this.state.timezone} onChange={this.onSelect}>
           {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
</select>

React-bootstrap Select box

This Select box uses bootstrap styles and components
<FormControl value={this.state.timezone} onChange={this.onSelect} componentClass="select" placeholder="select">
    {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
</FormControl>

React-select Select box

react-select is React version of Select2. 
<Select value={this.state.timezone} onChange={this.onSelect2} placeholder="select" options={Timezones} labelKey="name" valueKey="value">
</Select>

Complete component code

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-select/dist/react-select.min.css';
import React from 'react';
import Timezones from './Timezones';
import {FormControl} from 'react-bootstrap';
import Select from 'react-select';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      timezone:'America/Aruba'
    }
    this.onSelect = this.onSelect.bind(this);
    this.onSelect2 = this.onSelect2.bind(this);
  }

  onSelect(event) {
    this.setState({
      timezone:event.target.value
    });
  }

  onSelect2(language) {
    this.setState({
      timezone:language.value
    });
  }

  render() {
    return (
      <div>
        <h1>Select box for Timezones</h1>
        <select value={this.state.timezone} onChange={this.onSelect}>
           {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
        </select>
        <br/><br/><br/>
        <h1>Bootstrap Select box for Timezones</h1>
        <FormControl value={this.state.timezone} onChange={this.onSelect} componentClass="select" placeholder="select">
          {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
        </FormControl>
        <br/><br/><br/>
        <h1>React Select2 for Timezones</h1>
        <Select value={this.state.timezone} onChange={this.onSelect2} placeholder="select"
           options={Timezones} labelKey="name" valueKey="value">
        </Select>
      </div>
    )
  }
}
Read More
This Angular Component converts plain text tweets into real tweets. This component is responsible for parsing the tweets and handles transform mention (@sodhanalibrary), hashtags (#AngularJS) and URLs inserted in the tweet in functional URLs. This was created based on jquery-tweet-parser
Source Code           DEMO

Angular Component

This is the Angular Component which you can use it for converting plain text to real tweets
import { Component, Input } from '@angular/core';

@Component({
    selector: 'tweetParser',
    template: `<div [innerHTML]="myHtml"></div>`
})
export class TweetParser {
    @Input('urlClass') urlClass: string = 'react-tweet-parser__url';
    @Input('userClass') userClass: string = 'react-tweet-parser__user';
    @Input('hashtagClass') hashtagClass: string = 'react-tweet-parser__hashTag';
    @Input('target') target: string = '_blank';
    @Input('searchWithHashtags') searchWithHashtags: boolean = true;
    @Input('parseUsers') parseUsers : boolean = true;
    @Input('parseUrls') parseUrls :  boolean = true;
    @Input('parseHashtags') parseHashtags: boolean = true;
    @Input('tweet') tweet: string = '';

    myHtml: string = '';
    constructor() {
    }

    generateLink(url, urlClass, target, text) {
      return `<a href="${url}" className="${urlClass}" target="${target}">${text}</a>`;
    }

    ngOnChanges() {
      this.parseTweet();
    }

    ngOnInit(){
      this.parseTweet();
    }

    parseTweet() {
     const {urlClass, userClass, hashtagClass, target, searchWithHashtags, parseUsers, parseUrls, parseHashtags} = this;

     const REGEX_URL = /(?:\s)(f|ht)tps?:\/\/([^\s\t\r\n<]*[^\s\t\r\n<)*_,\.])/g, //regex for urls
                REGEX_USER = /\B@([a-zA-Z0-9_]+)/g, //regex for @users
                REGEX_HASHTAG = /\B(#[á-úÁ-Úä-üÄ-Üa-zA-Z0-9_]+)/g; //regex for #hashtags
     let searchlink, myTweet = this.tweet; //search link for hashtags
      //Hashtag Search link
     if (searchWithHashtags) {
          //this is the search with hashtag
          searchlink = "https://twitter.com/hashtag/";
      } else {
          //this is a more global search including hashtags and the word itself
          searchlink = "https://twitter.com/search?q=";
      }
      //turn URLS in the tweet into... working urls
      if (parseUrls) {
          myTweet = myTweet.replace(REGEX_URL, (url) => {
              let link = this.generateLink(url, urlClass, target, url);
              return url.replace(url, link);
          });
      }
      //turn @users in the myTweet into... working urls
      if (parseUsers) {
          myTweet = myTweet.replace(REGEX_USER, (user) => {
              let userOnly = user.slice(1),
                  url = `http://twitter.com/${userOnly}`,
                  link = this.generateLink(url, userClass, target, user);
              return user.replace(user, link);
          });
      }
      //turn #hashtags in the myTweet into... working urls
      if (parseHashtags) {
          myTweet = myTweet.replace(REGEX_HASHTAG, (hashtag) => {
              let hashtagOnly = hashtag.slice(1),
                  url = searchlink + hashtagOnly,
                  link = this.generateLink(url, hashtagClass, target, hashtag);
              return hashtag.replace(hashtag, link);
          });
      }

      this.myHtml  = myTweet;
   }
}

Usage

<tweetParser [tweet]="myTweet" urlClass="myUrlClass"></tweetParser>
Read More
This react library converts plain text tweets into real tweets. The library is responsible for parsing the tweets and handles transform mention (@monAmiTweetos), hashtags (#RTplz) and URLs inserted in the tweet in functional URLs. This library was created based on jquery-tweet-parser

Install react-tweet-parser

npm install react-tweet-parser --save

Import TweetParser

import TweetParser from 'react-tweet-parser';

Properties 

  1. urlClass - CSS class for URL
  2. userClass - CSS class for user links
  3. hashtagClass - CSS class for twitter user links
  4. target - link target attribute value (exp : _blank)
  5. searchWithHashtags - It will give q parameter 
  6. parseUsers - Parser users boolean flag 
  7. parseUrls - Parse urls boolean flag
  8. parseHashtags - Parse hashtags boolean flag

Usage

Use TweetParser component like below
<TweetParser
         urlClass = {"myUrlClass"}
         userClass = {"myUserClass"}
        >plain tweet text</TweetParser>

Read More
By including this component, you can create GIF preview like facebook.  Lets see how to use this library.

GIF images consists of many frames, so size of GIF image is more as compared to normal image. Its not recommended to load GIF images first and its better to maintain one normal preview image for every GIF image. You can use first frame of GIF image as preview image. Click here to see my on-line tool for generating first frame of GIF image

Concept

Click here to read concept of GIF Preview  

Using npm

npm install react-gif-preview --save

Import Tubular component and styles

import gifStyles from '../../node_modules/react-gif-preview/lib/react-gif-preview.css';
import GifPreview from 'react-gif-preview';

Usage

Here we have 2 properties src, gifSrc. Pass Preview image URL as src parameter and pass GIF image URL as gifSrc parameter. 
<GifPreview src="...sample_first_frame.png"  gifSrc="...sample_giphy.gif"/>
Read More
You can share GIF images by using URL directly, but its not possible to share blog post with GIF preview on facebook. Here I will give a trick to share GIF image from your blog post on facebook.
Lets take an example.

GIF image

Observe below GIF Image. This GIF image cannot be shared on facebook by sharing this article. We should provide another preview image for this GIF image. 

Providing Preview Image

Click here to create Facebook Style GIF Preview Image - Online. Download the image as shown in that tool and upload to your blog post.

When you share this article on facebook, you will see above preview image. User thinks it is GIF image, once user clicks on it it will redirect to your blog.

Sharing through page

If you are sharing blog posts through Facebook page, you can directly upload preview image over there. 
Click on plus icon and upload above GIF preview image.  
Read More
By including this component, you can make youtube video as HTML page background. This is created based jquery-tubular plugin. Lets see how to use this library.

Using npm

npm install react-tubular --save

Import Tubular component

import Tubular from 'react-tubular';

Usage

Here you can pass ration, youtube video id, mute, repeat, width, z-index of the wrapper, volume increase or decrease range, video starting point.
<Tubular
    ratio = {16/9} // usually either 4/3 or 16/9 -- tweak as needed
    videoId = {'ZCAnLxRvNNc'} // toy robot in space is a good default, no?
    mute = {true}
    repeat = {true}
    width = {window.innerWidth}
    wrapperZIndex = { -1 }
    increaseVolumeBy = { 10 }
    start = { 0 }
    ref={(ref)=>{this.tubular = ref}}/>

Functions

Tubular component provides some functions, which we can call by using ref. Observe below example which calls playVideo, pauseVideo, mute, decreaseVolume, increaseVolume functions
import React from 'react';
import Tubular from 'react-tubular';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.playVideo = this.playVideo.bind(this);
    this.pauseVideo = this.pauseVideo.bind(this);
    this.mute = this.mute.bind(this);
    this.decreaseVolume = this.decreaseVolume.bind(this);
    this.increaseVolume = this.increaseVolume.bind(this);
  }

  playVideo() {
    this.tubular.playVideo();
  }

  pauseVideo() {
    this.tubular.pauseVideo();
  }

  mute() {
    this.tubular.mute();
  }

  decreaseVolume() {
    this.tubular.decreaseVolume();
  }

  increaseVolume() {
    this.tubular.increaseVolume();
  }

  render() {
    return (
      <div>
        <h1>It Works </h1>
        <p>This React project just works with react-tubular</p>
        <h2>Actions</h2>

        <button onClick={this.playVideo}>Play video</button>
        <button onClick={this.pauseVideo}>Pause video</button>
        <button onClick={this.mute}>Mute video</button>
        <button onClick={this.decreaseVolume}>Decrease Volume</button>
        <button onClick={this.increaseVolume}>Increase Volume</button>

        <Tubular
            ratio = {16/9} // usually either 4/3 or 16/9 -- tweak as needed
            videoId = {'ZCAnLxRvNNc'} // toy robot in space is a good default, no?
            mute = {true}
            repeat = {true}
            width = {window.innerWidth}
            wrapperZIndex = { -1 }
            increaseVolumeBy = { 10 }
            start = { 0 }
            ref={(ref)=>{this.tubular = ref}}/>

      </div>
    )
  }
}
Read More
This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to write test cases for React-Redux apps.

Redux apps maintains common state for all components, so one component state might be depend on action in other component. So you should better test whole application with Provider and Store than testing each and every component.

Example

Lets take a Todo example.  You can find source of this example here

Testing Flow

  1. Enter test 'Sample task' in input field
  2. Click enter
  3. Check Todo Item is added or not
  4. Click on check box of that Todo Item
  5. Check whether todo task is completed or not

Setup 

Create store using reducers. Render the App component with Provider and store. This is basic setup to test Redux applications.
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
import reducer from '../reducers'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from '../containers/App'

const store = createStore(reducer)

describe('root', function () {

  it('renders without problems', function () {
    var root = TestUtils.renderIntoDocument(<Provider store={store}>
      <App />
    </Provider>);
    expect(root).toExist();
  });

});

Test Flow

The above described test flow can be found below. 
it('Todo lifecycle test', function () {
    var root = TestUtils.renderIntoDocument(<Provider store={store}>
      <App/>
    </Provider>);
    var compArr = TestUtils.findRenderedComponentWithType(root, TodoTextInput);

    // change input text value
    var inputElm = TestUtils.findRenderedDOMComponentWithTag(compArr, 'input');
    inputElm.value = 'some task';
    TestUtils.Simulate.change(inputElm);

    // press enter
    TestUtils.Simulate.keyDown(inputElm, {which : 13});

    // find ToDo Items and verify the value
    var todoItems = TestUtils.scryRenderedComponentsWithType(root, TodoItem);
    expect(todoItems[0].props.todo.text).toEqual('some task');

    // check the todo item
    var checkbox = TestUtils.findRenderedDOMComponentWithTag(todoItems[0], 'input');
    checkbox.checked = true;
    TestUtils.Simulate.change(checkbox);

    // check todo completion
    expect(todoItems[0].props.todo.completed).toEqual(true);
});
Read More

Blogroll

Follow this blog by Email

Popular Posts