Skip to content

Instantly share code, notes, and snippets.

Mae Capozzi maecapozzi

Block or report user

Report or block maecapozzi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.