Skip to content

Instantly share code, notes, and snippets.

Mae Capozzi maecapozzi

View GitHub Profile
@maecapozzi
maecapozzi / PrivateRoute.tsx
Last active Mar 22, 2019
TypeScript example for passing a React component as a prop
View PrivateRoute.tsx
// Sometimes you want to be able to pass a React component as a prop. One reason you might want to do this is routing.
// Imagine you want to create a special kind of route that can't be reached unless a user is logged in.
// A `<PrivateRoute />` component might be used like this:
// This component lets you see your user profile, but only after you have logged in.
// App.tsx
const App = () => (
<Router>
View suspenseDemo.js
// Import Suspense and lazy from React
import React, { Component, Suspense, lazy } from 'react'
import axios from 'axios'
import styled from 'styled-components'
import { Container, Row, Col } from 'react-grid-system'
import { SearchBar } from './components/SearchBar'
import { SearchInput } from './components/SearchInput'
// Dynamically import the file
View netflix-with-suspense.js
import React, { Suspense, lazy } from "react";
import axios from "axios";
// Thumbnails now lives in a different file (as it should)
// We dynamically import it when it's needed
const Videos = lazy(() => import("./Thumbnails"));
const Videos = ({ items }) => (
<Thumbnails>
{items.map(primeVideos => (
View Netflix.js
// This file is pseudocode! Don't try to run this, it probably won't work :)
import React from "react";
import axios from "axios";
import Thumbnails from "./Thumbnails";
const Videos = ({ items }) => (
<Thumbnails>
{items.map(primeVideos => (
<Thumbnail primeVides={primeVideos} />;
))}
View passing-theme-as-prop.js
// Imagine your application code looks like this
const Button = styled.button`
color: ${props => props.theme.main};
`
const theme = {
main: 'mediumseagreen',
}
View FamilyConsumer.js
const Child = () => {
// Family Consumer uses the
// Function as a Child pattern
return <FamilyConsumer>
// context is the object with lastName
// on it. It gets passed as an argument
{context => <p>{context}</p>}
</FamilyConsumer>;
};
View Grandmother.js
import React from "react";
import { FamilyProvider, FamilyConsumer } from "./FamilyContext";
export class Grandmother extends React.Component {
state = {
lastName: "Sanchez"
};
render() {
return (
View FamilyContext.js
import React from "react";
const FamilyContext = React.createContext({});
export const FamilyProvider = FamilyContext.Provider;
export const FamilyConsumer = FamilyContext.Consumer;
View propDrillingStateChange.js
class Grandmother extends React.Component {
state = {
lastName: 'Sanchez'
}
// When this function is called, the
// Grandmother's last name is updated
immigrateTo = (country, newLastName) => {
this.setState({ lastName: newLastName })
}
@maecapozzi
maecapozzi / passProps.js
Last active Aug 14, 2018
Basic React Prop Passing Example
View passProps.js
// <Mother /> is a container component that holds the
// application's state.
// In this case, <Mother /> holds the family's lastName.
class Mother extends React.Component {
state = {
lastName: 'Sanchez'
}
render () {
You can’t perform that action at this time.