meetzaveri

Config for jspDF with canvas

   window.html2canvas = html2canvas;

    var content = document.getElementById("content-22");
    console.log("content", content);
    console.log("document.body", document.body);

    html2canvas(content, { background: "red" }).then(canvas => {

meetzaveri

Config for jsPDF

componentDidMount() {
    window.html2canvas = html2canvas;
    var doc = new jsPDF({
      orientation: "landscape",
      unit: "pt"
      // format: [4, 2]
    });
 var content = document.getElementById("content-22");

meetzaveri

features(extra from https://invoicequick.com):

• Split window preview

templates:

• freelance clients (https://cdn.dribbble.com/users/1103382/screenshots/3802789/invoice-template.png)
• transportation/logisitics source and destination ()
• normal invoice

use cases

• Many of them you can find them on internet

meetzaveri

This utility is exclusively applicable for react component's state only.

Use-case:

Suppose there's a table of data containing user list. The data of user(here in userArr) is stored in state in array format.

Now I create a user, API gets executed, response gets returned and now there is a new user. So when user gets created, we need to add him(append him to users array userArr).

So everytime, a new uer gets created, we need to make sure that he gets added in to table hence appending him into userArr.

About the utility:

meetzaveri

Redux Saga flow for creating actions, reducers and store

Flow-

1. Create Actions,
2. Create reducer,
3. Attach it in store,
4. create saga,

meetzaveri

1. Clone your fork:

git clone [email protected]:YOUR-USERNAME/YOUR-FORKED-REPO.git

2. Add remote from original repository in your forked repository:

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream

meetzaveri

Before implementing main sidebar, please check the width of its parent. In this case I have used bootstrap's col class as col-md-2 as a class of this main sidebar's parent div.

Code snippet :

#main_sidebar {
  height: 100%;
  transition: all 300ms ease; 
 overflow-x: hidden;

meetzaveri

This is the best error boundary HOC found so far

import React from 'react'
import PropTypes from 'prop-types'

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props)
        this.state = { hasError: false }

meetzaveri

This is one pattern to look for when we make API Calls and purely transfer down data to be rendered in UI.

Loadable.Map({
  loader: {
    Bar: () => import('./Bar'),
    i18n: () => fetch('./i18n/bar.json').then(res => res.json()), // API Call
  },
  render(loaded, props) {
 let Bar = loaded.Bar.default;

meetzaveri

Input : Base64 string

Code :

// base64 string
var base64str = "data:application/pdf;base64,JVBERi0xgMCAwIDc3NSAwIDAKMCA2NTYgMCAwIDAgMCAwIDAgMCAwCjU3NSA3NDkgMCAwIDc5MSAwIDAgMAgMCAwIDAgMTA0Mwo2NjMgMCAwIDAgMCA2MjUgMCAwIDAgMAowIDAgMCAwIDAgMCAwIDAgMzk0IDAKMCAwIDQ3MCAwIDAgMCAwIDAgNDA3IDAKMCQm94IFstNSA4IDgzOSAtNzA4XQovQ0lEVG9HSURNYXAgL0lkZW50aXR5Ci9Ub1VuaWNvZGUgNDkgMCBSCi9Gb250RGVzY3JpcHRvciA1MCAwIFIKL1dgUgovZzU3IDcxIDAgUgovZzYwIDcyIDAgUgovZzY2IDczIDAgUgovZzZDIDc0IDAgUgo+Pgo+PgplbmRvYmoKOCAwIG9iago8PAovVHlwZSAvRm9udAovU3VidHlwZSAvVHlwZTAKL0Jhc2VGb250IC9MdXN0cmlhLVJlZ3VsYXIKL0VuY29kaW5nIC9JZGVudGl0eS1ICi9EZXNjZW5kYW50Rm9udHMgWzc1IDAgUl0KL1RvVW5pY29kZSA3NiAwIFIKPj4KZW5kb2JqCjkgMCBvYmoKPDwKL1R5cGUgL0ZvbnQKL1N1YnR5cGUgL1R5cGUzCi9Gb250TWF0cml4IFsuMDAxMDAwMDAwMDUgMCAwIC0uMDAxMDAwMDAwMDUgMCAwXQovRmlyc3RDaGFyIDAKL0xhc3RDaGFyIDU5Ci9Gb250QkJveCBbMCAwIDUwMCAtNzAwXQovQ0lEVG9HSURNYXAgL0lkZW50aXR5Ci9Ub1VuaWNvZGUgNzcgMCBSCi9Gb250RGVzY3JpcHRvciA3OCAwIFIKL1dpZHRocyBbNTAwIDAgMCAwIDAgMCAwIDAgMCAwCjAgMCAwIDAgMCAwIDAgMCA