Skip to content

Instantly share code, notes, and snippets.

View codeocelot's full-sized avatar

Joey Gracey codeocelot

View GitHub Profile
@codeocelot
codeocelot / simple-react-context.js
Last active November 9, 2017 12:11
Simple React Context Example
class App extends React.Component{
render = () => <div className="app">{this.props.children}</div>
}
class Greeting extends React.Component{
render = () => <p style={this.context.style}>Hello world!</p>
}
Greeting.contextTypes = {
color: React.PropTypes.string,
backgroundColor: React.PropTypes.string
}
@codeocelot
codeocelot / react-redux-provider.js
Created October 15, 2016 22:43
React Router Provider
export default class Provider extends Component {
getChildContext() {
return { store: this.store }
}
constructor(props, context) {
super(props, context)
this.store = props.store
}
@codeocelot
codeocelot / MuiThemeProvider.js
Created October 15, 2016 22:52
Material UI's MuiThemeProvider Component
import {Component, PropTypes} from 'react';
import getMuiTheme from './getMuiTheme';
class MuiThemeProvider extends Component {
static propTypes = {
children: PropTypes.element,
muiTheme: PropTypes.object,
};
const Greeting = (props,context) => <p style={context.style}>Hello World</p>
Greeting.contextTypes = {
color: React.PropTypes.string,
backgroundColor: React.PropTypes.string,
}
componentWillReceiveProps( nextProps, nextContext)
shouldComponentUpdate(nextProps,nextState,nextContext)
componentWillUpdate(nextProps,nextState,nextContext)
componentDidUpdate(prevProps,prevState,prevContext)
@codeocelot
codeocelot / UppercaseHoC.js
Last active April 29, 2017 21:03
Higher Order Component to uppercase text
const UppercaseHoC = (WrappedComponent) => (props) =>
<div style="text-transform: uppercase;">
<WrappedComponent {...props}/>
</div>
@codeocelot
codeocelot / UppercaseHoC-stateful.js
Last active November 9, 2017 12:09
HoC example using vanilla React component notation
const UppercaseHoC = (WrappedComponent) => class extends React.Component{
render(){
return(
<div style="text-transform: uppercase;">
<WrappedComponent {...this.props} />
</div>
)
}
}
import React from 'react';
import PropTypes from 'prop-types';
const route = 'https://jsonplaceholder.typicode.com/posts';
class AsyncPostHoC extends React.Component{
constructor(props){
super(props);
this.state = {};
}
import React from 'react';
import PropTypes from 'prop-types';
import AsyncPostHoC from '...';
const PostView = (props) => (
<div>
<p>{props.title}</p>
<p>{props.body}</p>
</div>
);
import React from 'react';
import PropTypes from 'prop-types';
const route = 'https://jsonplaceholder.typicode.com/posts';
class AsyncPostHoC extends React.Component{
constructor(props){
super(props);
this.state = {
isFetching: true,