Skip to content

Instantly share code, notes, and snippets.

Avatar

James K Nelson jamesknelson

View GitHub Profile
View UpdatePasswordForm.jsx
import { map, redirect, route } from 'navi'
function UpdatePasswordForm({ submitErrors }) {
return (
<Form
method='post'
submitErrors={submitErrors}
validate={value =>
value.password !== value.passwordConfirmation &&
{
View gist:432f00af5522ea07cbb39990a8105e0c
A React app can be split into a number of different types of functions and components, where *each type can depend only on the types above it in the hierarchy*.
This makes gives you a way to split up components and functions over your filesystem. It also helps you to keep components from growing too large, and encourages practices that make testing easier.
```
types (TypeScript typings)
^
utils (plain javascript functions)
^
contexts (React context, and provider components)
@jamesknelson
jamesknelson / create-cruv-app.sh
Last active Aug 22, 2018
React CRUV - 4 directories to solve project structure for good
View create-cruv-app.sh
create-react-app myapp
cd myapp/src
mkdir containers routes utils views
touch config.js contexts.js
mv App.* routes
sed -i '' -e 's/.\/App/.\/routes\/App/g' index.js
View typeof-documentstorage.ts
// typeof DocumentStorage
type DocumentStorage = Batchable<{
willUpdate: false | {
source: boolean | CompoundValueNode<boolean>;
undoHistories: boolean | CompoundValueNode<boolean>;
};
isAwaitingInitialData: false | {
source: boolean | CompoundValueNode<boolean>;
undoHistories: boolean | CompoundValueNode<boolean>;
View TextFieldControl-accessibility.md

I want to make a <TextFieldControl> component that passes a <Description> component to its render function.

Rendering a <Description> would automatically add an id to the element, and then add that id to the aria-describedby prop of the associated input.

For example, this component:

const EmailField = ({ error, value, onChange }) =>
View GovernRedux.js
import * as Govern from 'govern'
/**
* This component subscribes to a Redux store, outputting its current state.
*
* Typically, you'll use this component as an element in another component's
* `subscribe()` method. For example:
*
* ```js
* class Identity extends Govern.Component {
View HTTPOperation.ts
import * as Govern from 'govern'
import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from 'axios'
export interface HTTPOperation<Success = any, Rejection = any> {
hasEnded: boolean
isBusy: boolean
wasCancelled: boolean
wasSuccessful: boolean
wasRejected: boolean
View HighlightedCodeBlock.js
import React, { PureComponent, PropTypes } from "react"
import Prism from 'prismjs'
const codeBlockAliases = {
'js': 'jsx',
'html': 'markup',
'mdx': 'markdown',
'md': 'markdown',
}
@jamesknelson
jamesknelson / Pitch.mdx
Last active Feb 3, 2017
mdx: A markdown-like format that gives you inline JSX, and compiles to a React stateless function
View Pitch.mdx
metaDescription
junctions.js lets you add routes to your React components.

import Link from './Link' import ButtonTheme from './ButtonTheme' import ExampleSet from './ExampleSet' import ComponentExample from './ComponentExample' import GistVanillaExample from './examples/the-gist-vanilla' import GistSugarFreeExample from './examples/the-gist-sugar-free' import BasicExample from './examples/basic'

@jamesknelson
jamesknelson / gist:d18cbc97aeca53675b4e
Created Oct 5, 2015
Raw React `navigated` action
View gist:d18cbc97aeca53675b4e
function navigated() {
// Choose which component to render based on browser URL
var component = window.location.hash == "#/"
? React.createElement('div', {}, "Index Page")
: React.createElement('div', {}, "Not Found")
// Render the new component to the page's #react-app element
ReactDOM.render(
component,
document.getElementById('react-app')