gabeins

import { default as React } from 'react';
import { default as Document, Html, Head, Main, NextScript } from 'next/document';

// We need to duplicate the type definition for `DocumentFiles` here because nextjs
// does not export it from 'next/document'
type DocumentFiles = {
  sharedFiles: readonly string[];
  pageFiles: readonly string[];
  allFiles: readonly string[];
};

mikehwagz

import { SwitchTransition, Transition } from 'react-transition-group'
import gsap from 'gsap'

function MyApp({ Component, pageProps, router }) {
  return (
    <SwitchTransition>
      <Transition
        key={router.pathname}
        timeout={500}
        in={true}

coleturner

Demo

Context

useViewportScroll is a great way to create a parallax effect as the page scrolls. In some cases however, we only want to scroll when an element is in the viewport area.

So for example, if we have a "landscape" scene, and want to animate the Sun object only when it's in view, we start with our useViewportScroll implementation:

function Sun(props) {
 const { scrollY, scrollYProgress } = useViewportScroll();

jaredpalmer

import * as React from 'react';

/**
 * React.Ref uses the readonly type `React.RefObject` instead of
 * `React.MutableRefObject`, We pretty much always assume ref objects are
 * mutable (at least when we create them), so this type is a workaround so some
 * of the weird mechanics of using refs with TS.
 */
export type AssignableRef<ValueType> =
  | {

sanishkr

import React from 'react';
import ProgressiveImage from 'react-progressive-graceful-image';
import styled from 'styled-components';

const PlcHolder = styled.img`
  background: linear-gradient(
    to right,
    rgb(246, 247, 248) 0%,
    rgb(237, 238, 241) 20%,
    rgb(246, 247, 248) 40%,

marklchaves

/**
 * This was a proof of concept for me to be able to 
 * retrieve an API key using a Netlify environment variable
 * using this lambda function. I spent a lot of time looking
 * for a complete example like this--without any luck.
 *
 * So, here's a step-by-step of what I did.
 * 
 * 1) For this function to work, define the env variable in
 * Netlify > Site > Build & Deploy > Environment > Edit Variables

lukaskleinschmidt

@use 'sass:map';
@use 'variants' as * with (
  $breakpoints: (
    'small': 640px,
    'medium': 768px,
    'large': 1024px,
    'wide': 1280px,
  )
);

ianmstew

So another 🤯 about TypeScript. We use plain objects as arbitrary maps all the time, but TypeScript deems that usage (correctly) too flexible.

const map = {};
map.foo = 'foo'; // Error: Property 'foo' does not exist on type '{}'.

Okay, then we need to type our object as a map:

ertanhasani

import React, { Children } from 'react'
import Router from 'next/router'
import smoothScroll from '../utils/smoothScroll'

// this HOC is taken from https://github.com/zeit/next.js/blob/master/lib/link.js and modified
export default class LinkSmoothScroll extends React.Component {
  constructor (props) {
    super(props)
    this.linkClicked = this.linkClicked.bind(this)
  }

lenkan

// @ts-check
import { useState, useEffect } from 'react'

function getCurrentLocation () {
  return {
    pathname: window.location.pathname,
    search: window.location.search
  }
}