I hereby claim:
- I am drcmda on github.
- I am 0xca0a (https://keybase.io/0xca0a) on keybase.
- I have a public key ASBlLHissOHc3U5z4zOm-F-uBQQqqaQKF9HLDU87Q_LMNAo
To claim this, I am signing this object:
import { useEffect, useLayoutEffect, useReducer, useRef } from 'react' | |
import shallowEqual from './shallowEqual' | |
const useIsomorphicLayoutEffect = | |
typeof window !== 'undefined' ? useLayoutEffect : useEffect | |
export type State = Record<string, any> | |
export type StateListener<T extends State, U = T> = (state: U) => void | |
export type StateSelector<T extends State, U> = (state: T) => U | |
export type PartialState<T extends State> = |
shows how easy routing is: https://codesandbox.io/s/wouter-animated-transitions-w-reactspring-ikjpx | |
animated grid: https://codesandbox.io/s/26mjowzpr | |
non-animated grid: https://codesandbox.io/s/6z5q5wj27w | |
tarot cards: https://codesandbox.io/s/j0y0vpz59 | |
simplified tarot cards: https://codesandbox.io/s/3v45w26395 | |
chaining hooks: https://codesandbox.io/s/2v716k56pr | |
spring work corss platform, for instance 3d, transitions *meshes*: https://codesandbox.io/s/ly0oxkp899 | |
Easings are not an ideal model for fluid animation. Slide something out `left: 1s ease-in`, halfway through you abort. The thing will stop dead in its tracks and move back 1s with an ease-in curve. Nothing in the real world behaves like that! A real object moves according to laws, the force it took initially, surface friction, if you yank it back it will expend energy first, then move towards you slowly accelerating. |
import { useStore, api } from '@awv3/session' | |
import { useMesh } from '@awv3/core' | |
// Store | |
const [useState, api] = create(set => { | |
connections: { | |
}, | |
create: (url) => { | |
const id = guid() |
// Only export the things that are actually needed, cut out everything else | |
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js' | |
export { ShaderLib } from 'three/src/renderers/shaders/ShaderLib.js' | |
export { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js' | |
export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js' | |
export { ShaderChunk } from 'three/src/renderers/shaders/ShaderChunk.js' | |
export { Scene } from 'three/src/scenes/Scene.js' | |
export { Mesh } from 'three/src/objects/Mesh.js' | |
export { LineSegments } from 'three/src/objects/LineSegments.js' |
I hereby claim:
To claim this, I am signing this object:
// Only export the things that are actually needed, cut out everything else | |
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js' | |
export { ShaderLib } from 'three/src/renderers/shaders/ShaderLib.js' | |
export { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js' | |
export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js' | |
export { ShaderChunk } from 'three/src/renderers/shaders/ShaderChunk.js' | |
export { Scene } from 'three/src/scenes/Scene.js' | |
export { Mesh } from 'three/src/objects/Mesh.js' | |
export { LineSegments } from 'three/src/objects/LineSegments.js' |
import React from 'react' | |
import ReactDOM from 'react-dom' | |
import { Spring, animated, config } from 'react-spring' | |
let GUID = 0 | |
let CURRENT_TARGET = undefined | |
let CURRENT_COUNT = 0 | |
let CURRENT_THROWS = 0 | |
let ADOPTS = {} |
import React from 'react' | |
import { Transition, Trail, animated, config } from 'react-spring' | |
// Wrapper around react-springs Transition. | |
// It will Transition the child node in and out depending on the "show" prop. | |
export default class Fade extends React.PureComponent { | |
render() { | |
const { | |
children, | |
show, |
import React, { Component, PureComponent } from 'react' | |
import { render } from 'react-dom' | |
import Store, { connect } from './store' | |
@connect(({ users, setUserName }, { id }) => ({ ...users[id], setUserName })) | |
class User extends PureComponent { | |
change = ({ target: { value } }) => | |
this.props.setUserName(this.props.id, value) | |
render() { | |
const { name, id } = this.props |
import React, { Component, PureComponent } from 'react' | |
import { render } from 'react-dom' | |
const { Provider, Consumer } = React.createContext() | |
class RenderPure extends PureComponent { | |
render() { | |
return this.props.children | |
} | |
} |