Skip to content

Instantly share code, notes, and snippets.

View amcdnl's full-sized avatar

Austin amcdnl

View GitHub Profile
const { webpack } = require('@storybook/csf-plugin');
const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.tsx'
});
module.exports = async () => {
const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin');
return withNextra({
import React, { FC, useMemo, useRef } from 'react';
import { a, useSpring } from '@react-spring/three';
import { TextureLoader, LinearFilter, DoubleSide, Color, MathUtils } from 'three';
import { animationConfig } from '../utils';
import { useLoader } from '@react-three/fiber';
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
export interface IconProps {
image: string;
opacity?: number;
import { animate } from "framer-motion";
import React, { useEffect, useRef } from "react";
function Counter({ from, to }) {
const ref = useRef();
from https://stackoverflow.com/questions/65013742/how-to-animate-number-with-framer-motion
useEffect(() => {
const controls = animate(from, to, {

General

Dev

VSCode

import { useRef, useEffect, useCallback } from 'react';
export type noop = (...args: any[]) => any;
/**
* Stable callback
*
* References:
* - https://github.com/facebook/react/issues/14099
* - https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
import panzoom, { PanZoom } from 'panzoom';
import { useEffect, useRef, useState } from 'react';
export interface PanZoomProps {
maxZoom?: number;
minZoom?: number;
}
export const usePanZoom = (props?: PanZoomProps) => {
const elmRef = useRef<any | null>(null);
import NGraph from 'ngraph.graph';
const defaultOptions = {
radius: 500,
};
function rotate(cx, cy, x, y, angle) {
const radians = (Math.PI / 180) * angle;
const cos = Math.cos(radians);
const sin = Math.sin(radians);
import { cloneElement, useMemo } from 'react';
import classNames from 'classnames';
interface CloneElementProps {
element: any | null;
children?: any;
}
/**
* CloneElement is a wrapper component for createElement function.
- run:
name: publish to npm
command: |
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
npm publish dist/js/*
/**
* Space invaders canvas game
* Inspiration: https://codepen.io/amcdaniel2/pen/MdQZpL
*/
export const spaceInvaders = canvas => {
let screen;
let gameSize;
let game;
let invaderCanvas;