sriramrudraraju

export const downloadFile = (blob: Blob, fileName: string) => {
  const link = document.createElement("a");
  // create a blobURI pointing to our Blob
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  // some browser needs the anchor to be in the doc
  document.body.append(link);
  link.click();
  link.remove();
  // in case the Blob uses a lot of memory

sriramrudraraju

import { useEffect, useRef } from "react";

interface GlobalScanner {
  /**
   * debounce: milliseconds after which keydowns are considered done
   */
  debounce?: number;
  /**
   * disabled: boolean, to disable scanner
   */

sriramrudraraju

NavOptions Programatically

• Adding to above official documentation, we can also pass popUpto params in navOptionsBuilder

navController.navigate(
  R.id.action_fragmentOne_to_fragmentTwo,     // Destination Id
  null,                                       // Arguments that needs to be passed to destination
  navOptions {
      anim {                                  // Animation options
 enter = android.R.animator.fade_in

sriramrudraraju

interface WithHocProps {
  // hoc props
}
const withHoc = <T extends WithHocProps>(Component: React.ComponentType<T>) => {
  return (props: T) => {
    return (
      <Component {...props}/>
    );
  };
};

sriramrudraraju

const getOnlyNumbers = (value: string, maxLength?: number) => {
  // ignores everything except numbers
  // also ignores leading 0s
  const filter = value.replace(/[^0-9]+|^0+/, '');
  if (maxLength) {
    return filter.substring(0, maxLength);
  }
  return filter;
};

sriramrudraraju

// using jspdf, htmlcanvas

import React, { FC, useCallback, RefObject } from 'react';

import { Button } from '@material-ui/core';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import html2canvas from 'html2canvas';

import { useStyles } from './pdf-download.styles';

sriramrudraraju

Local Storage using Puppeteer

 // store in localstorage the token
await page.evaluateOnNewDocument (
  token => {
    localStorage.clear();
    localStorage.setItem('token', token);
  }, 'eyJh...9_8cw');
// open the url

sriramrudraraju

import React, { useState, useCallback } from 'react';
import { 
  Card, CardActionArea, CardMedia, CardContent, 
  Typography, Icon 
 } from '@material-ui/core';
import classnames from 'classnames';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({

sriramrudraraju

React with Typescript, eslint, prettier, Visual Studio Code

• npm create-react-app react-seed --typescript bootstraps react app with typescript.
• Add eslint extension for vsc
• Add .eslintrc file to the project.
• eslint would have worked if we using js and jsx, but here we using typescript. so
• ctrl + shift + p and search for settings(JSON) add below config

"eslint.validate": [
 "javascript",

sriramrudraraju

Interesting Findings

• functional component's defaultProps typescript issue

• Javascript Asynchronus handling >Tip: this author has good articles.