James Ravenscroft jrwebdev

jrwebdev / convert-render-prop-to-hoc.tsx

Last active April 1, 2019 13:28

	import { Subtract, Omit } from 'utility-types';
	import MakeCounter, { MakeCounterProps, InjectedCounterProps } from './MakeCounter';

	type MakeCounterHocProps = Omit<MakeCounterProps, 'children'>;

	const makeCounter = <P extends InjectedCounterProps>(
	Component: React.ComponentType<P>
	): React.SFC<Subtract<P, InjectedCounterProps> & MakeCounterHocProps> => ({
	minValue,
	maxValue,

jrwebdev / wrapped-counter.tsx

Last active June 3, 2018 02:29

	interface CounterProps extends InjectedCounterProps {
	style: React.CSSProperties;
	}

	const Counter = (props: CounterProps) => (
	<div style={props.style}>
	<button onClick={props.onDecrement}> - </button>
	{props.value}
	<button onClick={props.onIncrement}> + </button>
	</div>

jrwebdev / make-counter-render-prop-usage-advanced.tsx

Last active June 3, 2018 02:36

	interface CounterProps {
	style: React.CSSProperties;
	value: number;
	minCounterValue?: number;
	maxCounterValue?: number;
	}

	const Counter = (props: CounterProps) => (
	<MakeCounter
	minValue={props.minCounterValue}

jrwebdev / make-counter-render-prop-usage.tsx

Last active June 3, 2018 01:43

	interface CounterProps {
	style: React.CSSProperties;
	minValue?: number;
	maxValue?: number;
	}

	const Counter = (props: CounterProps) => (
	<MakeCounter minValue={props.minValue} maxValue={props.maxValue}>
	{injectedProps => (
	<div style={props.style}>

jrwebdev / make-counter-render-prop.tsx

Last active June 3, 2018 01:20

	interface InjectedCounterProps {
	value: number;
	onIncrement(): void;
	onDecrement(): void;
	}

	interface MakeCounterProps {
	minValue?: number;
	maxValue?: number;
	children(props: InjectedCounterProps): JSX.Element;

jrwebdev / loading-hoc-sfc.js

Created May 25, 2018 22:09

	const withLoading = Component => ({ loading, ...props }) =>
	loading ? <LoadingSpinner /> : <Component {...props} />;

jrwebdev / enhance-and-inject.tsx

Last active January 31, 2021 15:04

	export interface InjectedCounterProps {
	value: number;
	onIncrement(): void;
	onDecrement(): void;
	}

	interface MakeCounterProps {
	minValue?: number;
	maxValue?: number;
	}

jrwebdev / counter.tsx

Last active May 25, 2018 07:30

	import makeCounter, { InjectedCounterProps } from './makeCounter';

	interface CounterProps extends InjectedCounterProps {
	style?: React.CSSProperties;
	}

	const Counter = (props: CounterProps) => (
	<div style={props.style}>
	<button onClick={props.onDecrement}> - </button>
	{props.value}

jrwebdev / injector-hoc.tsx

Last active June 3, 2020 16:59

	import { Subtract } from 'utility-types';

	export interface InjectedCounterProps {
	value: number;
	onIncrement(): void;
	onDecrement(): void;
	}

	interface MakeCounterState {
	value: number;

jrwebdev / loading-hoc-sfc.tsx

Last active July 17, 2020 08:34

	const withLoading = <P extends object>(
	Component: React.ComponentType<P>
	): React.FC<P & WithLoadingProps> => ({
	loading,
	...props
	}: WithLoadingProps) =>
	loading ? <LoadingSpinner /> : <Component {...props as P} />;