Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniel Schmidt thebuilder

View GitHub Profile
@thebuilder
thebuilder / stories.test.ts
Last active Jun 29, 2020
Test all Stories in a CSF Storybook
View stories.test.ts
import React from 'react';
import { render, waitFor } from '@testing-library/react';
import chalk from 'chalk';
import globby from 'globby';
import path from 'path';
import {
IncludeExcludeOptions,
isExportStory,
storyNameFromExport,
} from '@storybook/csf';
View useInView.tsx
/* eslint-disable react-hooks/exhaustive-deps */
import * as React from 'react'
import { observe, unobserve } from './intersection'
import { InViewHookResponse, IntersectionOptions } from './index'
type State = {
inView: boolean
entry?: IntersectionObserverEntry
}
@thebuilder
thebuilder / hookWithRef.js
Last active Jul 9, 2020
Hook with ref callback
View hookWithRef.js
import React, {useCallback, useRef} from 'react'
function useHookWithRefCallback() {
const ref = useRef(null)
const setRef = useCallback(node => {
if (ref.current) {
// Make sure to cleanup any events/references added to the last instance
}
if (node) {
@thebuilder
thebuilder / jest.config.js
Last active Apr 12, 2020
Use Jest Projects to run both JSDom and Node tests in the same project
View jest.config.js
module.exports = {
projects: [
{
displayName: 'dom',
testEnvironment: 'jsdom',
snapshotSerializers: ['enzyme-to-json/serializer'],
testMatch: ['**/__tests__/**/*.test.js?(x)']
},
{
displayName: 'node',
@thebuilder
thebuilder / Example.story.js
Last active May 29, 2020
Mock Fetch requests in Storybook
View Example.story.js
import React from 'react'
import { storiesOf } from '@storybook/react'
import FetchStory from './FetchStory'
storiesOf('Fetch Example', module)
.add('Plain', () => (
<FetchStory mocks={{
matcher: '/api/signup',
response: {
body: {
@thebuilder
thebuilder / Button-arrow-func.jsx
Last active Apr 5, 2016
Stateless Button with arrow binding - But this creates a new instance on every render?
View Button-arrow-func.jsx
import React from 'react';
function handleClick(label) {
alert('clicked ' + label);
}
function Button({label}) {
return (
<button onClick={(event) => handleClick(label)}>{label}</button>
@thebuilder
thebuilder / Button.jsx
Created Mar 31, 2016
Stateless Button with basic onClick event
View Button.jsx
import React from 'react';
function handleClick(event) {
alert('click ' + event);
}
function Button({label}) {
return (
<button onClick={handleClick}>{label}</button>
);
View Load image as file
function loadImage(file) {
img = new Image();
img.onload = e => drawImageToCanvas();
img.onerror = e => $log.warn('Failed to load image.');
fileReader = new FileReader();
fileReader.onload = e => img.src = e.target.result;
fileReader.onerror = e => $log.warn('Failed to load file.');
fileReader.readAsDataURL(file);
}
@thebuilder
thebuilder / frameLoop.js
Created Sep 8, 2015
Call a function with a specific FPS. Exposes methods to pause, start and destroy the looper. Uses ES6.
View frameLoop.js
/**
* @param fn {Function} Callback function to trigger on frame
* @param fps {int} Target FPS
* @returns {{pause: pause, start: start, destroy: destroy}}
*/
function frameLoop(fn, fps=60) {
let then = 0;
let interval = 1000 / fps;
let isRunning = true;
let currentFrameId = null;
View angular-lookup.js
//Find angular.module definition. $2 contains the modules defined. Append with replacing like:
// $1$2,\n require('newModule')$3
/(angular.module\(.+\[)(.*)(\]\))/g
//Capture all methods called on the angular module. Allows you to append to it. with $&
/(?:angular.module\(.+\))(\s+\..+\))+/g
You can’t perform that action at this time.