Skip to content

Instantly share code, notes, and snippets.

View erikras's full-sized avatar

Erik Rasmussen erikras

View GitHub Profile
@erikras
erikras / machine.js
Last active January 20, 2021 14:53
Generated by XState Viz: https://xstate.js.org/viz
const government = Machine({
id: 'USA 🇺🇸',
initial: 'Trump',
states: {
Trump: {
on: {
INAUGURATION: 'Biden'
}
},
Biden: {
@erikras
erikras / machine.js
Last active July 20, 2022 20:26
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: 'labelEditing',
initial: 'idle',
context: {x:400,y:400},
states: {
idle: {
on: {
ADD_LAYER: {
target: 'selection',
actions: 'addLayer',
@erikras
erikras / machine.js
Last active February 4, 2021 18:36
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: 'labelEditing',
initial: 'idle',
states: {
idle: {
on: {
ADD_LAYER: {
target: 'selection',
actions: 'addLayer',
},
@erikras
erikras / machine.js
Last active November 15, 2020 11:40
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@erikras
erikras / typescript-challenge.ts
Created October 15, 2019 18:50
Typescript Challenge
interface Container<V> {
get: () => V;
set: (value: V) => void;
}
function createContainer<V>(value: V): Container<V> {
let v = value;
return {
get: () => v,
set: (newV: V) => {
@erikras
erikras / 00-ReduxFormDocsDeploy.md
Last active October 19, 2021 07:03
Redux Form Docs Deploy

Directory structure

<MakeAsyncFunction
listener={promiseListener}
start="START_ACTION_TYPE" // the type of action to dispatch when this function is called
resolve="RESOLVE_ACTION_TYPE" // the type of action that will resolve the promise
reject="REJECT_ACTION_TYPE" // the type of action that will reject the promise
>{asyncFunc => (
<SomeFormLibrary onSubmit={asyncFunc}>
...
@erikras
erikras / WhenFieldChanges.js
Created March 22, 2018 15:35
Example of how to use Redux Final Form Listener OnChange
const WhenFieldChanges = ({ field, becomes, set, to }) => (
<Field name={set} subscription={{}}>
{(
// No subscription. We only use Field to get to the change function
{ input: { onChange } }
) => (
<OnChange name={field}>
{value => {
if (value === becomes) {
onChange(to)
@erikras
erikras / focusOnFirstError.js
Created March 18, 2018 11:15
A function to call focus() on the first form input that has an error
function focusOnFirstError(formName, hasError) {
const form = document.forms[formName]
for (let i = 0; i < form.length; i++) {
if (hasError(form[i].name)) {
form[i].focus()
break
}
}
}
@erikras
erikras / finalFormFocus.jsx
Last active March 19, 2018 19:31
🏁 Final Form Focus 🧐
import React from 'react'
import { Form, Field } from 'react-final-form
import createDecorator from 'final-form-focus'
const focusOnErrors = createDecorator()
...
<Form
onSubmit={submit}
decorators={[ focusOnErrors ]} // <--------- 😎
validate={validate}