Warning when using withRouter with new React Context API

React version : > 16.6

Getting this warning when using Context API with withRouter

Warning: withRouter(Home): Function components do not support contextType.

This happens when use the React context API like this

Home.contextType = AppContext;

export default withRouter( Home ); // warning is triggering here

To fix this we need to use hoist-non-react-statics to automatically copy all non-React static methods. I used hoist-non-react-statics version 3.1.0.

Install `hoist-non-react-statics` using command `npm i hoist-non-react-statics` Link here

Import it in your file

import hoistNonReactStatics from 'hoist-non-react-statics';

After importing, export your component like this

Home.contextType = AppContext;

export default hoistNonReactStatics( Home, withRouter ( Home) );

Related reading here, here and here

Add attributes with empty values in ReactJS

There are times when you want to add html tag attributes in a React app.

We normally add attributes based on some logic, for example if some state value is true set the value of the attribute as something.

Example

<div className={ this.state.isRisk ? "danger" : "normal">...</div>

This will be either rendered as

<div class="danger">...</div> or div class="normal">...</div> 

based on the state value isRisk

In the above case there is a value for the attribute, that is class="danger" . Sometimes you don’t want to have any value for the attribute. I was using a third party library which checks only if the attribute is present, it does not care about the attribute values.

So I tried something like this.

<div { this.state.isPrint ? data-is-print : null } >...</div> 

I am using vscode editor and it will immediately throw the below error.

vscode error when trying to add attribute with empty values

I need the output like 

<div data-is-print>...</div>

This is how to do that.

Have a variable like this.

let dataIsPrint = this.state.isPrint ? { "data-is-print" : "" } : {};

In the render() use like this.

<div { ...dataIsPrint } > Some text </div>

The rendered code will look like this.

<div data-is-print> Some text </div>

The same method can be used to add checked and disabled attributes in form inputs.

Hope this helps… 🍹

React — How to pass event or any other details to onClick or other event handlers

We may need to get a the event details in a onClick or onChange event handler.

Normal event handler will look like this.

<button onClick={ this.handleClick } >Save </button>
<input type="text" onChange={ this.handleChange } />

In the above case we are not passing any event details to handler function.

Consider the input example above, we need to get the input value in event handler, how do we do it? We need to pass the event details to the handler function. This is how to do it.

<input type="text" onChange={ (evt) => this.handleChange(evt) } />

The handleChange function

handleChange(evt) {
  // ---------^ this variable will have the event details.  //get the value of the input box
  let value = evt.target.value;}

Similarly we can also send any other information to the event handler function.

render() {
   let name = "Sput";    return <input type="text" onChange={ (evt, name) => this.handleChange(evt, name) } />
}

The handleChange function will look like this.

handleChange(evt, name) {
  // --------------^ this variable will have the name details.
}

Hope this helps 🍺

GetSpriteXY

GetSpriteXY – a tool to find icon position in a CSS sprite

I was working with some css sprites in a project. There was sprite with lot of small icons. It was difficult finding the position of icons inside the sprite. I used to open the sprite in Photoshop and find the X and Y position of the icon needed. And this position was used in the CSS class. To make the process simpler a tool was created where you can upload the sprite and using mouse draw a box around the icon. The tool will generate the CSS style for you.

Please check it at
https://getspritexy.netlify.com/

The source is available in GitHub, fork/clone and play with it

Convert JavaScript object to FormData

Scenario: I was using Formik in React. There was a need to convert formik values to FormData to send to API as post.

This is how it was done.

// A sample object  
let values = { name : 'Kiran', location: 'Sedona' };

let data = new FormData();
for (let key in values) {
    data.append(key, values[key]);
}
console.log(data);

Make React work in IE11

These are the most probable reasons your Create React App (CRA) is not working in Internet Explorer 11 (IE11)

1. IE11 is not included in package.json browserList
2. Promise fails in IE11
3. fetch function fails in IE11

Fix

Update package.json browserList

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],

to this (see minimum IE version changed from <=11 to <=10)

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "not op_mini all"
  ],

Add support for fetch

Add npm packages whatwg-fetch

npm i whatwg-fetch

Add support for Promise and other polyfills

Add npm package core-js and regenerator-runtime

 npm i core-js 

npm i regenerator-runtime

Update src/index.js with the newly added packages

import 'whatwg-fetch';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

This should work your CRA in IE11.

Remove map files in React CRA

Map files are generated by default when you do a build using webpack.
If you don’t want .map files in your build you can do the below steps.

1. Create a new .env in your project root (don’t put it in src folder)
2. Add GENERATE_SOURCEMAP=false in your .env file
3. Execute command npm run build, this should build files without any map files.

Your .env file will look like this.

VSCode highlight closing tag

Visual studio by default highlight all the matching tags. So it will be difficult to find the closing tag. This is what it looks like

When we click on a div, the editor highlights all the div tags, we cannot find the closing tag.

There is a vscode extension to fix this Highlight Matching Tag

After adding this extension the above code will look like this

See the highlighted start and end tags

Git repo:
https://github.com/vincaslt/vscode-highlight-matching-tag

DOS games of 90s

These were the DOS games I used to play

• Wolf 3D
• Biomenace
• Pacman
• Aladdin

First computer

ZX spectrum

This was my first computer, way back in early 90’s. This does’nt had any monitor, it was connect to our television (the big fat CRT television)

Used to do programming in BASIC and played some games. Did lot of small programs in BASIC. The source was lost somewhere as there were no much storage devices at that time.