meetzaveri

<div class="img-upload-placeholder relative">
  <img class="opacity-05"/>
  <input class="absolute opacity-0 z-50 w-full h-full cursor-pointer"/>
</div>

Imagine these classes of tailwind utility classes as h-full means height: 100% and so on...

meetzaveri

module.exports = {
  purge: ['./src/**/*.js'],
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },

meetzaveri

This was my attempt to learn hooks and use it in project. I have used it in appbaseio's reactivesearch

import React, { useMemo, useEffect, useRef } from 'react';
import { oneOfType, arrayOf, string, bool, func } from 'prop-types';
import { getSearchState } from '@appbaseio/reactivecore/lib/utils/helper';
import types from '@appbaseio/reactivecore/lib/utils/types';

import { createSelectorHook } from 'react-redux';
import { getComponent, ReactReduxContext } from '../../utils';

meetzaveri

To set your custom margin,padding for custom value(10,20 or any),

@each $size in (0, 4, 7, 10, 14, 15, 20, 25, 30, 35, 40, 50, 60, 70, 100, 150) {
 .m-#{$size} {
   margin: #{$size}px;
 }
 .mt-#{$size} {
margin-top: #{$size}px;

meetzaveri

// Memorize this function! Be able to transform an array of objects into // a normalized object based on a key. Looking up an item in an array is a O(n) // operation if you don't know the item's index. If you know a value on the // item, and that value is unique, you can create an index based on that value // to enable you to do O(1) look ups

const indexArrayBy = key => array => {
  return array.reduce((acc, cur) => {
 acc[cur[key]] = cur;

meetzaveri

ES6 vs Vanilla (Vanilla Replacement for ES6 code)

• For object merging

ES6

let obj1 = {a:1};
let obj2 = {b:2};
let mergeTwoObjs = {...obj1,...obj2} ; // {a:1,b:2}

Vanilla

meetzaveri

const task1S = (cb) => {
  setTimeout(()=>{
    console.log('Task 1 started');
    cb();
  },0)
}

const task1F = (cb) => {
 setTimeout(()=>{

meetzaveri

Code :

export const withAuth = (Component, menuObj) => {
    const { menuId, action, menuName } = menuObj;
    class UserMode extends React.Component {
        state = {
            isAllowedToAccess: false,
            isProcessCompleted: false,

meetzaveri

Typical dependent validations in formik

```js
minimum_requirement_datas: Yup.number()
        .nullable()
        .when(['minimum_requirement'], {
            is: value => value == 'purchaseAmount' || value == 'itemQuantity', // alternatively: (isBig, isSpecial) => isBig && isSpecial
            then: Yup.number()
                .nullable()
                .required('Required'),

meetzaveri

https://www.npmjs.com/package/npm-check-updates