Skip to content

Instantly share code, notes, and snippets.

View tol-is's full-sized avatar
🏠
Working from home

Tolis C. tol-is

🏠
Working from home
View GitHub Profile
@tol-is
tol-is / App.jsx
Created July 12, 2017 13:01 — forked from robertgonzales/App.jsx
How to make a custom Prompt (using getUserConfirmation) for React Router v4
// use Prompt like normal... magic happens in getUserConfirmation
class App extends Component {
render () {
return (
<Router getUserConfirmation={getUserConfirmation}>
{...}
<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
@tol-is
tol-is / simple-theme-provider.js
Last active August 17, 2018 10:43
Styled Components - Simple Theme Provider
import React from 'react';
import ReactDOM from 'react-dom';
import styled, { ThemeProvider } from 'styled-components';
// Define theme constants
const theme = {
titleFontSize : '24px',
titleFontSizeMD : '32px'
};
@tol-is
tol-is / with-size.js
Created August 30, 2018 11:51
with-size higher order function.
import React, { Component } from 'react';
import { debounce } from 'throttle-debounce';
export default function (ComposedComponent) {
class WithSize extends Component {
static getDomNodeDimensions(node) {
const {
top, right, bottom, left, width, height,
} = node.getBoundingClientRect();
return {
@tol-is
tol-is / card.js
Last active September 30, 2018 15:42
FLIP strategy example from google devsummit
/**
* Copyright 2014 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
// .filter(Boolean)
// .fitler to unique values
const fruit = ['Apple', 'Banana', 'Apple', 'Orange']
console.log(Array.from(new Set(fruit)))
const unique = (element, index, fullArray) => fullArray.indexOf(element) === index
console.log(fruit.filter(unique))
/*
@tol-is
tol-is / RadixHeading.tsx
Last active September 3, 2019 15:38
Radix Heading in framerX
import * as React from "react"
import { PropertyControls, ControlType, Frame } from "framer"
import { ThemeWrap } from "./ThemeWrap"
import { Heading as HeadingPrimitive, Box } from "@modulz/radix"
interface Props {
xray: Boolean
text: string
textColor:
@tol-is
tol-is / Parallax
Created October 4, 2019 09:47
Parallax Component with Framer Motion
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
import { useViewportScroll, useTransform, motion } from 'framer-motion';
const Parallax = ({ rangeX, rangeY, children, ...rest }) => {
const ref = useRef();
const [rangeStart, setRangeStart] = useState(0);
const [rangeEnd, setRangeEnd] = useState(0);
const { scrollY } = useViewportScroll();
export const carbonScale = (params = {}) => {
const {
length = 20,
minSize = 10,
intervals = 4,
increment = 2,
transform = v => v
} = params;
const getSize = count => {
/*
* Test supported OpenType features in a font
* (see opentype_features_for_cjk Cookbook topic for CJK features)
*
* Demonstrate supported typographic OpenType features after checking
* whether a particular feature is supported in a font. Only those features
* will be shown which are
* a) available in the font
* b) are supported by PDFlib's "features" option
* c) are not used automatically for shaping and layout features
@tol-is
tol-is / assert.md
Created November 15, 2020 21:31 — forked from jamiebuilds/assert.md

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)