Skip to content

Instantly share code, notes, and snippets.

@drcmda
drcmda / index.html
Last active February 7, 2018 12:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
import React from "react"
import styled from "styled-components"
import { animated } from 'react-spring'
const AnimatedButton = ({ toggleModal, hostRef, deal, pictureRef, style, src }) => (
<AnimateButtonStyling
innerRef={hostRef}
pictureRef={pictureRef}
style={style}
onClick={() => toggleModal()}>
@drcmda
drcmda / index.jsx
Last active November 15, 2022 20:05
react-spring with react-native
import React from 'react'
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
import { Spring, animated } from 'react-spring/dist/native'
const styles = {
flex: 1,
margin: 0,
borderRadius: 35,
backgroundColor: 'red',
alignItems: 'center',
@drcmda
drcmda / index.js
Last active June 10, 2018 18:50
react without build-tools
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
@drcmda
drcmda / index.js
Last active July 10, 2018 17:36
Aping Redux with context
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
}
}
@drcmda
drcmda / index.js
Last active July 11, 2018 08:15
Context with Reduxes connect semantics
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
@drcmda
drcmda / Fade.js
Last active August 10, 2018 09:39
Slug / Fade, react-spring helpers
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,
@drcmda
drcmda / index.js
Created September 10, 2018 14:52
React 16 using throw and error bounds
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 = {}
@drcmda
drcmda / three-hooks.js
Created September 11, 2018 12:35
three treeshaking
// 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'
@drcmda
drcmda / keybase.md
Created January 15, 2019 17:47
keybase.md

Keybase proof

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: