Skip to content

Instantly share code, notes, and snippets.

Daniel Schmidt thebuilder

View GitHub Profile
View useInView.tsx
import * as React from 'react'
import { observe, unobserve } from './intersection'
import { HookResponse, IntersectionOptions } from './typings/types'
type State = {
inView: boolean
entry?: IntersectionObserverEntry
}
export function useInView(options: IntersectionOptions = {}): HookResponse {
@thebuilder
thebuilder / hookWithRef.js
Last active Feb 11, 2019
Hook with ref callback
View hookWithRef.js
import React, {useState} from 'react'
function useHookWithRefCallback() {
const [node, setRef] = useState(null)
useEffect(
() => {
if (node) {
// Your Hook now has a reference to the ref element.
}
@thebuilder
thebuilder / jest.config.js
Last active Jun 8, 2018
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 Dec 15, 2017
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
@thebuilder
thebuilder / javascript_resources.md
Last active Aug 29, 2015 — forked from jookyboi/javascript_resources.md
Here are a set of libraries, plugins and guides which may be useful to your Javascript coding.
View javascript_resources.md

Libraries

  • jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • AngularJS - Conventions based MVC framework for HTML5 apps.
  • Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • lawnchair - Key/value store adapter for indexdb, localStorage
You can’t perform that action at this time.