Skip to content

Instantly share code, notes, and snippets.

View itaditya's full-sized avatar
🎯
Focusing

Aditya Agarwal itaditya

🎯
Focusing
View GitHub Profile
@itaditya
itaditya / Button.jsx
Created August 25, 2021 03:50
Storybook + JSDoc + Typescript
import React from 'react';
import './button.css';
/**
* @param { import('./types').ButtonProps} props
*/
export const Button = (props) => {
const { backgroundColor = '', primary = false, size = 'medium', label, ...restProps } = props;
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
@itaditya
itaditya / CustomLink.tsx
Created August 11, 2021 18:59
Type checking params of CustomLink
@itaditya
itaditya / stale_closures_react.jsx
Created August 10, 2021 09:58
Explain Stale closures and how we can fix it.
const { useEffect } = require("react");
// Suffers from Stale Closures
export function useUpdatedExit(props) {
// initial = 0, latest = 0
// initial = 0, latest = 1
// initial = 0, latest = 2
const { initial, latest, cb } = props;
function handleExit() {
@itaditya
itaditya / sleep.js
Created July 5, 2021 11:18
Easy way to delay promise resolving
function sleep(duration, shouldFail) {
return new Promise((resolve, reject) => {
const cb = shouldFail ? reject : resolve;
setTimeout(() => cb(), duration);
});
}
@itaditya
itaditya / youtube-120x-volume.js
Last active December 29, 2022 20:50
Increase volume above 100% on youtube and other sites.
var videoElem = document.querySelector('video');
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(videoElem);
var gainNode = audioCtx.createGain();
gainNode.gain.value = 5;
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
@itaditya
itaditya / react-challenge.jsx
Created February 3, 2021 13:31
sayHello is a function defined in Actor function component. Can you make App component call the sayHello function?
function Actor({ name }) {
function sayHello() {
console.log('hello', name);
}
return (
<button onClick={sayHello}>
Say Hello
</button>
);
@itaditya
itaditya / redact.css
Created February 2, 2021 04:53
Use this class to add black-out text.
.redact {
background-color: #000 !important;
border-radius: 6px !important;
color: transparent !important;
filter: brightness(0) !important;
}
@itaditya
itaditya / toast.jsx
Last active January 17, 2021 07:13
Scalable Props API structure
const toastProps = {
purpose: 'alert',
variant: 'success',
isClosable: false,
onClose: handleClose,
root: {
'data-testId': 'root-wrapper',
},
content: {
id: 'main-toast',
@itaditya
itaditya / compound-comp-tab.jsx
Created October 10, 2020 05:21
Implementation of Tab component in compound component pattern.
const Tab = ({ id, children }) => (
<Consumer>
{({ changeTab }) => <div onClick={() => changeTab(id)}>{children}</div>}
</Consumer>
);
@itaditya
itaditya / App.test.jsx
Last active October 5, 2020 13:27
(Blog) Testing a Redux hooked app
import { render, fireEvent, screen, waitForElementToBeRemoved } from '@testing-library/react';
import * as utils from './utils';
jest.mock('./utils');
const foodData = [
{
id: 'SM',
label: 'Sausage McMuffin',