Instantly share code, notes, and snippets.

View index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";
import "./styles.css";
const listData = [0, 1, 2, 3, 4, 5, 6, 7];
const colors = ["#6da5ff", "#7971ea", "#5900d8"];
// we'll iterate over this array to create groups of 3 components
const baseArray = [...Array(3).keys()];
View simple_proxy.js
// a handler object specifies which methods to proxy
// this one will simply override JavaScript’s default object get method
const loggingHandler = {
get(target, property) {
const val = target[property]
console.log(`Property "${property}" returned "${JSON.stringify(val)}"!`)
return val
}
}
View jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"components/*",
"portal/*",
"platform/*"
]
View launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch current file",
"type": "node",
"request": "launch",
"program": "${file}",
"runtimeExecutable": "${env:HOME}/.nvm/versions/node/v8.4.0/bin/node"
},
View basic_lifecycle.js
export default function addAnimation(animateIn, animateOut) {
return function wrapComponent(WrappedComponent) {
return class AnimationHOC extends Component {
state = { animatingOut: false }
componentDidMount() {
if (this.props.isVisible) animateIn(this.child)
}
View FLIP_animation_function.js
export function animateGroups (ListComponent) {
const items = [...ListComponent.querySelectorAll('.item')]
const oldPositionDict = items.reduce((acc, item) => {
acc[item.dataset.id] = item.getBoundingClientRect()
return acc
}, {})
return function initiateAnimation () {
const transformPositionDict = {}
// Make sure to get the new array of item elements --
// React might have destroyed and created new DOM nodes
View .script-compiled.js
// load the data, find the svg container in the dom,
// and call createMap
d3.json('map-data.json', function(error, data){
var svg = d3.select('svg')
createMap(svg, data)
})
// put all logic in a nice reusable function
function createMap(svg, data) {
View .script-compiled.js
d3.json('./stock-data.json', function(error, data){
createChart(document.querySelector('svg'), data)
})
// ========================================================
// I like to encapsulate d3 logic in a createChart function that returns an update
// function -- this makes it easy to re-use the logic e.g. with React
// ========================================================
function createChart (svg, data, options) {