Skip to content

Instantly share code, notes, and snippets.

James K Nelson jamesknelson

Block or report user

Report or block jamesknelson

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
@jamesknelson
jamesknelson / component-routing.js
Last active Mar 19, 2019
Two APIs for routing with React that support POST methods and SSR.
View component-routing.js
/**
UPDATE:
This component and hook based routing/fetching API won't work, as `useAsync()`
is an impossible component.
In order to use async functions to respond to route changes, the functions will
need to be registered with a parent cache/provider with a unique key. As such, a
more natural component-based architecture would involve a `<Route path>` component
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 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 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 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'

You can’t perform that action at this time.