loganpowell

// from: https://github.com/styled-components/styled-components/issues/416#issuecomment-276230181

import React from 'react';
import classnames from 'classnames';
import styled from 'styled-components';
import { ContainerQuery } from 'react-container-query';

const query = {
  'box1': {
    minWidth: 250,

loganpowell

// from: https://github.com/styled-components/styled-components/issues/416#issuecomment-276230181

import React from 'react';
import classnames from 'classnames';
import styled from 'styled-components';
import { ContainerQuery } from 'react-container-query';

const query = {
  'box1': {
    minWidth: 250,

loganpowell

// found through: https://blog.graph.cool/all-you-need-to-know-about-apollo-client-2-7e27e36d62fd

import React from 'react'
import ReactDOM from 'react-dom'
import ListPage from './components/ListPage'
import CreatePage from './components/CreatePage'
import DetailPage from './components/DetailPage'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'

loganpowell

/**
* Example of how to get the number of followers for a Medium.com User.
*
*
* Related  links:
* https://github.com/Medium/medium-api-docs/issues/30#issuecomment-227911763
* https://github.com/Medium/medium-api-docs/issues/73
*/

// LODASH

loganpowell

React Native

styled-components has a ReactNative mode that works exactly the same, except you import the things from styled-components/native:

import styled from 'styled-components/native';

const StyledView = styled.View`
  background-color: papayawhip;

loganpowell

// from: https://dev.to/underdogio/adding-animations-to-your-react-app-with-react-transition-group

import './styles.css'
import React from 'react'
import Transition from 'react-transition-group/Transition'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import {render} from 'react-dom'

function Card ({children, onRemove}) {
  return (

loganpowell

// from: https://github.com/acdlite/recompose/issues/427#issuecomment-320080852
compose(
  withState(
    'interaction',
    'setInteraction',
    // Props get passed in here, but we're ignoring them.
    () => {
      const interaction = {
        scrollPositionY: new Animated.Value(0),
      };

loganpowell

//from: https://reactpatterns.com/#event-switch

class NameContainer extends React.Component {
  constructor() {
    super()
    this.state = {name: ""}
  }

  render() {
    return <Name onChange={newName => this.setState({name: newName})} />

loganpowell

// from: https://www.zhubert.com/blog/2016/02/05/react-composability-patterns/

const CleverParent = React.createClass({
  render() {
    const children = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, {
        onClick: () => alert(JSON.stringify(child.props, 0, 2))
      })
    })
    return <div>{children}</div>

loganpowell

// from: https://www.zhubert.com/blog/2016/02/05/react-composability-patterns/

const DataGetter = React.createClass({
  render() {
    const { children } = this.props
    const data = [ 1,2,3,4,5 ]
    return children(data)
  }
})