Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Lishu Gupta LishuGupta652

🎯
Focusing
View GitHub Profile
View State management with react and typescript
import React, { createContext } from "react";
export type RejectedFileType = {
rejectedFiles: any[];
currentPage: number;
totalRecords: number;
sortByObject: Record<string, string>
loading: boolean;
error: string,
@LishuGupta652
LishuGupta652 / css
Created September 26, 2022 17:31
100 Bytes of CSS to look great everywhere
View css
html {
max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
}
h1,h2,h3,h4,h5,h6 {
@LishuGupta652
LishuGupta652 / ++index.css
Created December 28, 2021 19:22
gradient and glassmorphism
View ++index.css
.gradient-bg-welcome {
background-color: #0f0e13;
background-image: radial-gradient(
at 0% 0%,
hsla(253, 16%, 7%, 1) 0,
transparent 50%
),
radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
}
@LishuGupta652
LishuGupta652 / useElementPosition.js
Created December 27, 2021 08:36
use Element Position React gist
View useElementPosition.js
import { useEffect } from "react";
import { useState } from "react";
export default function useElementPosition(el) {
function getElement(x, y) {
return {
x,
y,
};
}
@LishuGupta652
LishuGupta652 / GlobalContext.js
Last active December 27, 2021 08:34
Global Reducer + context
View GlobalContext.js
import React, { createContext, useReducer, useContext } from "react";
// Define the context
const GlobalStateContext = createContext();
const GlobalDispatchContext = createContext();
// Reducer
const globalReducer = (state, action) => {
switch (action.type) {
case "TOGGLE_THEME": {
View Download Data From Console
const filename = 'data.json';
const jsonStr = JSON.stringify(JsonExport);
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
View HideReactSourceCode
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
# Netlify
CI=false npm run build
View netlify.toml
[build]
command = "CI=false npm run build"
publish = "/build"
base = "/"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
View firebase Snipets
// Firebase Storage :
const handleUpload = () => {
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
'state_changed',
(snapshot) => {
// Progress funciton
const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
We couldn’t find that file to show.