sandeshdamkondwar

syntax = "proto3";

// Define a component which is a recursive structure
message Component {
  string id = 1;
  string description = 2;
  string component_id = 3;
  int32 component_seq = 4;
  string component_type = 5;
  repeated Component child_components = 6;

sandeshdamkondwar

import React, { useEffect, useState, useRef } from "react";

// Helpers
import { debounce, generateCols, getNoOfCols } from "../../helpers/";

// Hooks
import { useInifiniteScroller } from "../../hooks/useInfiniteScroller";

// Defs
import { IGifItem } from "../../defs/interfaces";

sandeshdamkondwar

{
  "name": "webpack-and-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

sandeshdamkondwar

{
  "name": "setting_up_webpack4",
  "version": "1.0.0",
  "description": "setting up webpack4",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  },
  "repository": {

sandeshdamkondwar

import React, { useState, useMemo } from 'react'

function Counter() {
	const [counterOne, setCounterOne] = useState(0)
	const [counterTwo, setCounterTwo] = useState(0)

	const incrementOne = () => {
		setCounterOne(counterOne + 1)
	}

sandeshdamkondwar

import React, { useReducer, useEffect } from 'react'
import axios from 'axios'

const initialState = {
	loading: true,
	error: '',
	post: {}
}

const reducer = (state, action) => {

sandeshdamkondwar

html[data-theme='dark'] {
  --text-color: #f0F0F0;
  --background-body: #1C1C1C;
  --other-var: #111111;
}

html[data-theme='light'] {
  --text-color: #111111;
  --background-body: #FAFAFA;
  --other-var: #ffffff;

sandeshdamkondwar

// hooks/use-viewport.js
import { useState, useEffect } from 'react'

export const MOBILE = 'MOBILE'
export const TABLET = 'TABLET'
export const DESKTOP = 'DESKTOP'

const getDevice = width => {
  if (width < 768) return MOBILE
  else if (width < 992) return TABLET

sandeshdamkondwar

// hooks/use-clipboard-api.js
import { useState, useCallback } from 'react'

function useClipboardApi() {
  const [content, setContent] = useState(null)

  const askPermission = useCallback(async queryName => {
    try {
      const permissionStatus = await navigator.permissions.query(queryName)
      return permissionStatus.state === 'granted'

sandeshdamkondwar

// hooks/use-page-visibility.js
import { useState, useLayoutEffect } from 'react'

function usePageVisibility() {
  const [isPageVisible, setIsPageVisible] = useState(!document.hidden)

  useLayoutEffect(() => {
    const handleVisibility = () => {
      setIsPageVisible(!document.hidden)
    }