Extending Piglatin app with our own custom converter
Well, last time we implemented a simple app that converts English text into a Pig Latin. But there are two limitations in that app.
It does not handle punctuations. For an example "Thi => "Ithay is not working with our current app.
It does not handle capital letters properly. For an example cherries!", Sally => errieschay!", Allysay is not working either.
The problem is in the third party library which we used for the conversion. The third party library is a very naive one which does not support punctuations and capital letters. The solution is to write our own functional component which is responsible for the transformation and hook it up into our app by substituting the third party library we are currently using. Before getting into this, I recommend you to go through my previous article  in React and Redux which is a really good starting point.
- Must have a good understanding on React and Redux stack.
With that in mind let’s get started. Firstly we need to implement the conversion logic inside our component. Here’s the code listing for that.
Finally we need to hook up our custom translator with the app. For that merely locate the action creator and substitute the call to the third party module with our own custom translator. Here’s the code which is responsible for that.
You may find working code for the project here .
Check out the following sketch of the working app for a sample input which covers both upper case letters and punctuation scenarios.