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…
-
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…
-
GetSpriteXY
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.
-
Make React work in IE11
These are the most probable reasons your Create React App (CRA) is not working in Internet Explorer 11 (IE11) IE11 is not included in package.json browserList Promise fails in IE11 fetch function fails in IE11 Fix Update package.json browserList to this (see minimum IE version changed from <=11 to <=10) Add support for fetch Add npm packages whatwg-fetch Add support for Promise and other polyfills Add npm package core-js and regenerator-runtime Update src/index.js with the newly added packages 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. Create a new .env in your project root (don’t put it in src folder) Add GENERATE_SOURCEMAP=false in your .env file 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 There is a vscode extension to fix this Highlight Matching Tag After adding this extension the above code will look like this 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
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.
