seanrankin

// Line-clampin is hard...
// Insert a 'see more' link at the end of x lines of text, hide the rest, and enable expansion

import React, { createRef, forwardRef, useLayoutEffect, useState } from 'react';

import { useGetBoundingClientRect } from '../../hooks';
import { Collapse } from './index';
import styles from './styles.scss';

const Word = forwardRef(({ word }, ref) => <span ref={ref}>{word} </span>);

seanrankin

const { declare } = require('@babel/helper-plugin-utils');
const { types: t } = require('@babel/core');
const { basename, extname } = require('path');

module.exports = declare(() => {
  const visitor = {
    JSXOpeningElement(path, state) {
      const openingElement = path.container.openingElement;
      const attributes = openingElement.attributes;
      const elementName =

seanrankin

/* Keyboard use will show focus, mouse clicks won't */
:focus:not(:focus-visible) {
  outline: none;
}

/* A nice way to prevent hover events from sticking on mobile */
@media (hover: hover) {
  a:hover {
    background: yellow;
  }

seanrankin

// Selections
=query(A1:A,"Select *")

// Array Formulas Iterate Through Rows
=ArrayFormula(
  IF(ROW(B:B) = 1,"Column Header",
    "Write something here..."
  )
)

seanrankin

function formatDateToString(date, format){
	const newDate = new Date(date);

	const D = newDate.getDate();
	const DD = (newDate.getDate() < 10 ? '0' : '') + newDate.getDate();
	const M = newDate.getMonth() + 1;
	const MM = ((newDate.getMonth() + 1) < 10 ? '0' : '') + (newDate.getMonth() + 1);
	const YYYY = newDate.getFullYear();

	switch (format) {

seanrankin

import styled from 'styled-components';
import { desktopBreakpointOnly, desktopWide, mobileBreakpoint, tabletBreakpoint,  } from 'styles/breakpoints';

// A Flexbox layout that solves the empty last row alignment issue

const gutterWidth = '12px';
const twoPerRow = `calc(1/2 * 100% - (1 - 1/2) * ${gutterWidth})`;
const threePerRow = `calc(1/3 * 100% - (1 - 1/3) * ${gutterWidth})`;

export const Tiles = styled.ul<{ isMultiRoom: boolean }>`

seanrankin

import React, { useEffect, useState } from 'react';

export const EffectHook = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    console.log(`useEffect ${count}`);
  });

seanrankin

import React from "react";
import ReactDOM from "react-dom";

const UserContext = React.createContext();

const UserAvatar = ({ size }) => (
  <UserContext.Consumer>
    {user => (
      <img
        className={`user-avatar ${size || ""}`}

seanrankin

// React Notes

///////////////////////////////////////////////////////////////////////////
// Render Props
// The term “render prop” refers to a simple 
// technique for sharing code between React components
// using a prop whose value is a function.
///////////////////////////////////////////////////////////////////////////

<DataProvider render={data => ( <h1>Hello {data.target}</h1> )} />

seanrankin

let UserContext = React.createContext();

class App extends React.Component {
  state = {
    user: null,
    setUser: user => {
      this.setState({ user });
    }
  };