Skip to content

Instantly share code, notes, and snippets.

👨‍💻
Codin'...

Erik Rasmussen erikras

👨‍💻
Codin'...
Block or report user

Report or block erikras

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View typescript-challenge.ts
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 Oct 14, 2019
Redux Form Docs Deploy
View 00-ReduxFormDocsDeploy.md

Directory structure

View reactReduxPromiseListenerApi.jsx
<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 Mar 22, 2018
Example of how to use Redux Final Form Listener OnChange
View WhenFieldChanges.js
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 Mar 18, 2018
A function to call focus() on the first form input that has an error
View focusOnFirstError.js
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 Mar 19, 2018
🏁 Final Form Focus 🧐
View finalFormFocus.jsx
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}
@erikras
erikras / warning-engine.js
Created Dec 11, 2017
A warning engine implemented in 🏁 React Final Form
View warning-engine.js
const WarningEngine = ({ mutators: { setFieldData } }) => (
// FormSpy lets you listen to any part of the form state you want.
// If you provide an onChange prop, FormSpy will not render to the DOM.
<FormSpy
subscription={{ values: true }}
onChange={({ values }) => {
setFieldData('firstName', {
warning: values.firstName ? undefined : 'Recommended'
})
setFieldData('lastName', {
@erikras
erikras / final-form-set-field-data-usage.js
Created Dec 11, 2017
Usage example for final-form-set-field-data.
View final-form-set-field-data-usage.js
import { createForm } from 'final-form'
import setFieldData from 'final-form-set-field-data'
// Create Form
const form = createForm({
mutators: { setFieldData },
onSubmit
})
form.mutators.setFieldData('firstName', { awesome: true })
@erikras
erikras / final-form-calculate-usage.js
Created Dec 11, 2017
Usage example of final-form-calculate
View final-form-calculate-usage.js
import { createForm } from 'final-form'
import createDecorator from 'final-form-calculate'
// Create Form
const form = createForm({ onSubmit })
// Create Decorator
const decorator = createDecorator(
// Calculations:
{
@erikras
erikras / arrays.js
Last active Dec 3, 2017
🏁 Final Form Arrays
View arrays.js
import { createForm } from 'final-form'
import arrayMutators from 'final-form-arrays'
// Create Form
const form = createForm({
mutators: {
// potentially other mutators here
...arrayMutators
},
onSubmit
You can’t perform that action at this time.