Trey Huffine treyhuffine

Full stack engineer, passionate for open source technology.

treyhuffine / render-prop-functions.js

Last active January 3, 2019 15:29

	import React from 'react';
	import Storage from 'components/Storage';

	class ComponentNeedingStorage extends React.Component {
	state = {
	username: '',
	favoriteMovie: '',
	isFetching: false,
	}

treyhuffine / Storage.js

Last active March 26, 2018 12:12

A render prop component to access localStorage

	import React from 'react';

	class Storage extends React.Component {
	state = {
	localStorageAvailable: false,
	};

	componentDidMount() {
	this.checkLocalStorageExists();
	}

treyhuffine / ShareSecretToLife.js

Created February 27, 2018 13:05

	import React from 'react';

	const SECRET_TO_LIFE = 42;

	class ShareSecretToLife extends React.Component {
	render() {
	return (
	<div>
	{this.props.render({ secretToLife: SECRET_TO_LIFE })}
	</div>

treyhuffine / render-prop-renamed.js

Last active May 21, 2019 16:49

	import React from 'react';

	class SharedComponentWithGoofyName extends React.Component {
	render() {
	return (
	<div>
	{this.props.wrapThisThingInADiv()}
	</div>
	);
	}

treyhuffine / using-simple-render-prop.js

Last active February 27, 2018 13:20

	import React from 'react';
	import SharedComponent from 'components/SharedComponent';

	const SayHello = () => (
	<SharedComponent render={() => (
	<span>hello!</span>
	)} />
	);
	// This would return:
	// <div>

treyhuffine / simple-render-prop-form.js

Created February 27, 2018 12:48

	import React from 'react';

	const SharedComponent extends React.Component {
	render() {
	return (
	<div>
	{this.props.render()}
	</div>
	);
	}

treyhuffine / hoc-with-functions.js

Last active February 6, 2021 03:33

A wrapped HOC that utilizes functions

	import React from 'react';
	import withStorage from 'components/withStorage';

	class ComponentNeedingStorage extends React.Component {
	state = {
	username: '',
	favoriteMovie: '',
	}

	componentDidMount() {

treyhuffine / withStorage.js

Last active March 4, 2024 21:01

A higher-order component to access localStorage

	import React from 'react';

	const withStorage = (WrappedComponent) => {
	class HOC extends React.Component {
	state = {
	localStorageAvailable: false,
	};

	componentDidMount() {
	this.checkLocalStorageExists();

treyhuffine / props-from-hoc.js

Created February 26, 2018 15:19

Accessing props from a HOC in the wrapped component

	import React from 'react';
	import withSecretToLife from 'components/withSecretToLife';

	const DisplayTheSecret = props => (
	<div>
	The secret to life is {props.secretToLife}.
	</div>
	);

	const WrappedComponent = withSecretToLife(DisplayTheSecret);

treyhuffine / hoc-with-props.js

Last active April 1, 2024 16:18

A simple HOC that passes props to the wrapped component

	import React from 'react';

	const withSecretToLife = (WrappedComponent) => {
	class HOC extends React.Component {
	render() {
	return (
	<WrappedComponent
	{...this.props}
	secretToLife={42}
	/>